• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

PHP admin 1年前 (2018-06-08) 15次浏览 未收录 0个评论
文章目录[隐藏]



    
        
        
        
        

        
        
        
        
            mui.init();
        
        
            body {
                font-family: "Helvetica Neue", Helvetica, sans-serif;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                background: #E6E6E6;
                margin: 0px;
            }
        
        
            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 = '
'; 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 = '
  • 暂无照片
  • '; le = document.getElementById("empty"); files.splice(0, files.length); }

    照片

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

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

    照片预览:

  • 暂无照片

  • 清空照片


    上传


    回复内容:

    
    
    
        
            
            
            
            
    
            
            
            
            
                mui.init();
            
            
                body {
                    font-family: "Helvetica Neue", Helvetica, sans-serif;
                    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                    background: #E6E6E6;
                    margin: 0px;
                }
            
            
                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 = '
    '; 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 = '
  • 暂无照片
  • '; le = document.getElementById("empty"); files.splice(0, files.length); }

    照片

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

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

    照片预览:

  • 暂无照片

  • 清空照片


    上传


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

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

    这样可以在浏览器生成图片的地址提前预览 不需要等到服务器返回地址
    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;
                }

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

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

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

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

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

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

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

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

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


    39MO , 版权所有丨如未注明 , 均为原创丨转载请注明原文链接:javascript – 我把图片上传到服务器,不知道怎么在浏览器访问这张图片
    喜欢 (0)
    [1353713598@qq.com]
    分享 (0)
    发表我的评论
    取消评论
    表情 贴图 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址