Maison  >  Article  >  développement back-end  >  javascript - 我把图片上传到服务器,不知道怎么在浏览器访问这张图片

javascript - 我把图片上传到服务器,不知道怎么在浏览器访问这张图片

WBOY
WBOYoriginal
2016-12-01 00:26:002623parcourir

<code>


    
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <title></title>
        <script src="js/mui.min.js"></script>

        <script src="js/jquery1.42.min.js"></script>
        <script type="text/javascript" src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet">
        <script type="text/javascript" charset="utf-8">
            mui.init();
        </script>
        <style>
            body {
                font-family: "Helvetica Neue", Helvetica, sans-serif;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                background: #E6E6E6;
                margin: 0px;
            }
        </style>
        <script type="text/javascript">
            var files = [];
            var i = 1,
                gentry = null,
                w = null;
            var hl = null,
                le = null,
                de = null;

            var f1 = null;
            var f2 = null;

            // 监听DOMContentLoaded事件
            document.addEventListener("DOMContentLoaded", function() {
                // 获取DOM元素对象
                hl = document.getElementById("history");
                le = document.getElementById("empty");

            }, false);

            // 上传文件
            function upload() {

                if(files.length <= 0) {
                    plus.nativeUI.alert("没有添加上传文件!");
                    return;
                }

                if(files.length < 2) {

                    f1 = files[0].pic;
                    f2 = "";
                } else {
                    f1 = files[0].pic;
                    f2 = files[1].pic;
                }
                var wt = plus.nativeUI.showWaiting();
                
                var url = 'http://demo.dcloud.net.cn/helloh5/uploader/upload.php';
                //预期服务器范围的数据类型
                var dataType = 'json';
                //发送数据  
                var data = {
                    files1: f1,
                    files2: f2
                };
                $.post(url, data, success, dataType);
            }
            //成功响应的回调函数
            var success = function(response) {
                plus.nativeUI.closeWaiting();
                if(response != null) {
                    alert("上传成功");
                }

            }

            // 拍照 
            function getImage() {

                var cmr = plus.camera.getCamera();
                cmr.captureImage(function(p) {
                        plus.io.resolveLocalFileSystemURL(p, function(entry) {
                            if(files.length < 2) {
                                createItem(entry);
                                appendFile(p);
                            }
                        });
                    }, function(error) {
                        alert("Capture image failed: " + error.message);
                    }, {
                        filename: "file:///storage/sdcard0/DCIM/Camera/" + "ra/"
                    } //改变一下拍照的路径,名字

                );

            }

            // 从相册添加文件 
            function appendByGallery() {
                plus.gallery.pick(function(path) {
                    plus.io.resolveLocalFileSystemURL(path, function(entry) {
                        if(files.length < 2) {
                            createItem(entry);
                            appendFile(path);
                        }

                    });

                });
            }

            // 添加文件
            var index = 1;

            function appendFile(path) {

                var img = new Image();
                img.src = path;
                img.onload = function() {
                    var that = this;
                    //生成比例 
                    var w = that.width,
                        h = that.height,
                        scale = w / h;
                    w = 50 || w; //480  你想压缩到多大
                    h = w / scale;

                    //生成canvas
                    var canvas = document.createElement('canvas');

                    var ctx = canvas.getContext('2d');

                    $(canvas).attr({
                        width: w,
                        height: h
                    });

                    ctx.drawImage(that, 0, 0, w, h);

                    var base64 = canvas.toDataURL('image/jpeg', 1 || 0.8); //1z 表示图片质量,越低越模糊。
                    //              alert(base64);      

                    files.push({
                        name: "file" + index,
                        pic: base64
                    }); // 把base64数据丢进数组,上传要用。

                    index++;

                    var pic = document.getElementById("x");
                    pic.src = base64; //这里丢到img 的 src 里面就能看到效果了
                }

            }

            // 显示文件
            function displayFile(li) {

                var name = li.entry.name;
                var suffix = name.substr(name.lastIndexOf('.'));
                var url = "";

                url = "examples/camera_image.html";
                //
                w = plus.webview.create(url, url, {
                    scrollIndicator: 'none',
                    scalable: true,
                    bounce: "all"
                });
                w.addEventListener("loaded", function() {

                    w.evalJS("loadMedia('" + li.entry.toLocalURL() + "')");
                    //        //w.evalJS( "loadMedia(\""+"http://localhost:13131/_doc/camera/"+name+"\")" );
                }, false);
                w.addEventListener("close", function() {
                    w = null;
                }, false);
                w.show("slide-in-right", 300);
            }

            // 添加播放项
            function createItem(entry) {
                var li = document.createElement("li");
                li.className = "ditem";
                li.innerHTML = '<span class="iplay"><font class="aname"><br/><font class="ainf">';
                li.setAttribute("onclick", "displayFile(this);");
                hl.insertBefore(li, le.nextSibling);
                li.querySelector(".aname").innerText = entry.name;
                li.entry = entry;

                // 设置空项不可见
                le.style.display = "none";
            }

            // 清除历史记录
            function cleanHistory() {
                hl.innerHTML = '<li id="empty" class="ditem-empty">暂无照片';
                le = document.getElementById("empty");
                files.splice(0, files.length);

            }
        </script>
    

    
        <div id="dcontent" class="long-dcontent">

            <table class="long-table">
                <tbody>
                    <span style="margin: 0 0 10px 0px;color: #6c6c6c;">照片</span>
                    <tr>
                        <td style="background: #fff;text-align: center;color:#9B9B9B;width:40%">
                            <div class="button button-select pz" onclick="getImage()">
<img  src="../images/pz.png"   style="max-width:90%" alt="javascript - 我把图片上传到服务器,不知道怎么在浏览器访问这张图片" >拍摄照片</div>
                        </td>
                        <td style="width:10%"></td>
                        <td style="background: #fff;text-align: center;color:#9B9B9B;width:40%">
                            <div class="button button-select pz" onclick="appendByGallery()">
<img  src="../images/pz.png"   style="max-width:90%" alt="javascript - 我把图片上传到服务器,不知道怎么在浏览器访问这张图片" >选择照片</div>
                        </td>

                    </tr>

                </tbody>
            </table>
            <p class="heading" style="color: #6c6c6c;">照片预览:</p>
            <div id="history" class="dlist" style="text-align:left;">
                <li id="empty" class="ditem-empty" style="list-style-type:none; ">暂无照片</li>
            </div>
            <br>
            <div class="b-waring" onclick="cleanHistory();" style="border: 1px solid #999999;margin: 10px;padding:10px 0 ;text-align: center;">清空照片</div>
            <br>

            <div class="button long-btn" onclick="upload()" style="border: 1px solid #999999;margin: 10px;padding:10px 0 ;text-align: center;">上传</div>
            <br>

        </div>
        <img  src="" id="x" alt="javascript - 我把图片上传到服务器,不知道怎么在浏览器访问这张图片" >
    

</code>

javascript - 我把图片上传到服务器,不知道怎么在浏览器访问这张图片

回复内容:

<code>


    
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <title></title>
        <script src="js/mui.min.js"></script>

        <script src="js/jquery1.42.min.js"></script>
        <script type="text/javascript" src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet">
        <script type="text/javascript" charset="utf-8">
            mui.init();
        </script>
        <style>
            body {
                font-family: "Helvetica Neue", Helvetica, sans-serif;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                background: #E6E6E6;
                margin: 0px;
            }
        </style>
        <script type="text/javascript">
            var files = [];
            var i = 1,
                gentry = null,
                w = null;
            var hl = null,
                le = null,
                de = null;

            var f1 = null;
            var f2 = null;

            // 监听DOMContentLoaded事件
            document.addEventListener("DOMContentLoaded", function() {
                // 获取DOM元素对象
                hl = document.getElementById("history");
                le = document.getElementById("empty");

            }, false);

            // 上传文件
            function upload() {

                if(files.length <= 0) {
                    plus.nativeUI.alert("没有添加上传文件!");
                    return;
                }

                if(files.length < 2) {

                    f1 = files[0].pic;
                    f2 = "";
                } else {
                    f1 = files[0].pic;
                    f2 = files[1].pic;
                }
                var wt = plus.nativeUI.showWaiting();
                
                var url = 'http://demo.dcloud.net.cn/helloh5/uploader/upload.php';
                //预期服务器范围的数据类型
                var dataType = 'json';
                //发送数据  
                var data = {
                    files1: f1,
                    files2: f2
                };
                $.post(url, data, success, dataType);
            }
            //成功响应的回调函数
            var success = function(response) {
                plus.nativeUI.closeWaiting();
                if(response != null) {
                    alert("上传成功");
                }

            }

            // 拍照 
            function getImage() {

                var cmr = plus.camera.getCamera();
                cmr.captureImage(function(p) {
                        plus.io.resolveLocalFileSystemURL(p, function(entry) {
                            if(files.length < 2) {
                                createItem(entry);
                                appendFile(p);
                            }
                        });
                    }, function(error) {
                        alert("Capture image failed: " + error.message);
                    }, {
                        filename: "file:///storage/sdcard0/DCIM/Camera/" + "ra/"
                    } //改变一下拍照的路径,名字

                );

            }

            // 从相册添加文件 
            function appendByGallery() {
                plus.gallery.pick(function(path) {
                    plus.io.resolveLocalFileSystemURL(path, function(entry) {
                        if(files.length < 2) {
                            createItem(entry);
                            appendFile(path);
                        }

                    });

                });
            }

            // 添加文件
            var index = 1;

            function appendFile(path) {

                var img = new Image();
                img.src = path;
                img.onload = function() {
                    var that = this;
                    //生成比例 
                    var w = that.width,
                        h = that.height,
                        scale = w / h;
                    w = 50 || w; //480  你想压缩到多大
                    h = w / scale;

                    //生成canvas
                    var canvas = document.createElement('canvas');

                    var ctx = canvas.getContext('2d');

                    $(canvas).attr({
                        width: w,
                        height: h
                    });

                    ctx.drawImage(that, 0, 0, w, h);

                    var base64 = canvas.toDataURL('image/jpeg', 1 || 0.8); //1z 表示图片质量,越低越模糊。
                    //              alert(base64);      

                    files.push({
                        name: "file" + index,
                        pic: base64
                    }); // 把base64数据丢进数组,上传要用。

                    index++;

                    var pic = document.getElementById("x");
                    pic.src = base64; //这里丢到img 的 src 里面就能看到效果了
                }

            }

            // 显示文件
            function displayFile(li) {

                var name = li.entry.name;
                var suffix = name.substr(name.lastIndexOf('.'));
                var url = "";

                url = "examples/camera_image.html";
                //
                w = plus.webview.create(url, url, {
                    scrollIndicator: 'none',
                    scalable: true,
                    bounce: "all"
                });
                w.addEventListener("loaded", function() {

                    w.evalJS("loadMedia('" + li.entry.toLocalURL() + "')");
                    //        //w.evalJS( "loadMedia(\""+"http://localhost:13131/_doc/camera/"+name+"\")" );
                }, false);
                w.addEventListener("close", function() {
                    w = null;
                }, false);
                w.show("slide-in-right", 300);
            }

            // 添加播放项
            function createItem(entry) {
                var li = document.createElement("li");
                li.className = "ditem";
                li.innerHTML = '<span class="iplay"><font class="aname"><br/><font class="ainf">';
                li.setAttribute("onclick", "displayFile(this);");
                hl.insertBefore(li, le.nextSibling);
                li.querySelector(".aname").innerText = entry.name;
                li.entry = entry;

                // 设置空项不可见
                le.style.display = "none";
            }

            // 清除历史记录
            function cleanHistory() {
                hl.innerHTML = '<li id="empty" class="ditem-empty">暂无照片';
                le = document.getElementById("empty");
                files.splice(0, files.length);

            }
        </script>
    

    
        <div id="dcontent" class="long-dcontent">

            <table class="long-table">
                <tbody>
                    <span style="margin: 0 0 10px 0px;color: #6c6c6c;">照片</span>
                    <tr>
                        <td style="background: #fff;text-align: center;color:#9B9B9B;width:40%">
                            <div class="button button-select pz" onclick="getImage()">
<img  src="../images/pz.png"   style="max-width:90%" alt="javascript - 我把图片上传到服务器,不知道怎么在浏览器访问这张图片" >拍摄照片</div>
                        </td>
                        <td style="width:10%"></td>
                        <td style="background: #fff;text-align: center;color:#9B9B9B;width:40%">
                            <div class="button button-select pz" onclick="appendByGallery()">
<img  src="../images/pz.png"   style="max-width:90%" alt="javascript - 我把图片上传到服务器,不知道怎么在浏览器访问这张图片" >选择照片</div>
                        </td>

                    </tr>

                </tbody>
            </table>
            <p class="heading" style="color: #6c6c6c;">照片预览:</p>
            <div id="history" class="dlist" style="text-align:left;">
                <li id="empty" class="ditem-empty" style="list-style-type:none; ">暂无照片</li>
            </div>
            <br>
            <div class="b-waring" onclick="cleanHistory();" style="border: 1px solid #999999;margin: 10px;padding:10px 0 ;text-align: center;">清空照片</div>
            <br>

            <div class="button long-btn" onclick="upload()" style="border: 1px solid #999999;margin: 10px;padding:10px 0 ;text-align: center;">上传</div>
            <br>

        </div>
        <img  src="" id="x" alt="javascript - 我把图片上传到服务器,不知道怎么在浏览器访问这张图片" >
    

</code>

javascript - 我把图片上传到服务器,不知道怎么在浏览器访问这张图片

在php(服务端)返回上传成功后的路径给浏览器(客服端)

做图片预览的话,服务器端上传成功之后返回前端一个图片的地址,前端再将图片显示出来

<code>这样可以在浏览器生成图片的地址提前预览 不需要等到服务器返回地址
function getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) { // ie
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // 火狐
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // 谷歌
                    url = window.webkitURL.createObjectURL(file);
                }
                    return url;
            }</code>

图片上传成功后,需要后端返回成功信息。
具体要和后端商量。

API接口文档,返回什么参数。需要用到什么,就和后端沟通。

将图片路径存到数据库里面,再读取出来

一般都是后端把路径返回前端,你们后端要闹哪样

一般都是后端生成生给你一个URL的,你问下response回来是什么打出来看看,或者直接问后端的开发人员

通过上传接口上传图片,通常接口会返回相关数据,比如:

<code>{data:{status:1,imgPath:"/xxx/xx.png"}}</code>

status 上传的状态(上传成功,上传不成功),imgPath上传成功通常会给出访问图片的地址。

通过返回的图片地址就可访问图片了

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn