使用WebUploader上传图片

来源：互联网发布：360浏览器使用js脚本编辑：程序博客网时间：2024/05/22 05:16

html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>uploader</title>    <script src="jquery-3.1.0.min.js"></script>    <script src="plupload-2.1.9/plupload.full.min.js"></script>    <script src="uploader.js"></script>    <style>        *{            box-sizing: border-box;        }        #uploader{            width: 200px;            height: 500px;        }        img{            max-width: 100%;        }    </style></head><body> <div id="uploader">     <!--用来放置加入上传队列的图片-->    <div class="upload_pic" id="upload_pic"></div>     <!-- 上传按钮 -->     <div>         <a id="picker">             <img src="upload.png" alt="">         </a>     </div> </div></body><script>    $(function () {        //初始化上传        uploader();    })</script></html>

js 需要把jquery , plupload.full.min.js 引入

uploader.js

/** * Created by zdeleted_upload_icondeleted_upload_icon on 2016/9/26. * 上传图片 */function uploader() {    //uploader配置    var uploader = new plupload.Uploader({        browse_button:"picker",                                             //触发文件选择对话框的DOM元素，当点击该元素后便后弹出文件选择对话框。该值可以是DOM元素对象本身，也可以是该DOM元素的id        url:"",                                                             //服务器端接收和处理上传文件的脚本地址，可以是相对路径(相对于当前调用Plupload的文档)，也可以是绝对路径        filters:{            mime_types:[{ title : "Image files", extensions : "jpg,png" }], //用来限定上传文件的类型            max_file_size:"20M",                                            //用来限定上传文件的大小            prevent_duplicates:"true"                                       //是否允许选取重复的文件，为true时表示不允许，为false时表示允许        },        multipart:"true",                                                   //为true时将以multipart/form-data的形式来上传文件，为false时则以二进制的格式来上传文件        runtimes:"html5,htm4",                                              //用来指定上传方式        chunk_size:"0",                                                     //分片上传文件时，每片文件被切割成的大小，为数字时单位为字节。也可以使用一个带单位的字符串，如"200kb"。当该值为0时表示不使用分片上传功能        max_retries:"0"                                                     //当发生plupload.HTTP_ERROR错误时的重试次数，为0时表示不重试    });    //初始化    uploader.init();    //添加监听事件，当文件添加到上传队列后触发    uploader.bind("FilesAdded",function (uploader,files) {        for (var i = 0; i < files.length; i++){            //构造html代码            var html = '<a id="file-' + files[i].id +'"></a>';            $(".upload_pic").before($(html));            //点击删除按钮，删除上传的文件            $(".deleted_upload_icon").click(function () {                $(this).parent().remove();            });            !function(i){                previewImage(files[i],function(imgsrc){                    $('#file-'+files[i].id).append('<img src="'+ imgsrc +'" />');                })            }(i);        }    });    //添加监听事件，当上传发生错误时    uploader.bind("Error",function (uploader,errObject) {        console.log(errObject.code);    });}//图片预览 file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数function previewImage(file,callback){    //确保文件是图片    if(!file || !/image\//.test(file.type)) return;    //gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png    if(file.type=='image/gif'){        var fr = new mOxie.FileReader();        fr.onload = function(){            callback(fr.result);            fr.destroy();            fr = null;        };        fr.readAsDataURL(file.getSource());    }else{        var preloader = new mOxie.Image();        preloader.onload = function() {            //先压缩一下要预览的图片,宽86，高86            // preloader.downsize( 86, 86 );            //得到图片src,实质为一个base64编码的数据            var imgsrc = preloader.type=='image/jpeg' ? preloader.getAsDataURL('image/jpeg',80) : preloader.getAsDataURL();            callback && callback(imgsrc); //callback传入的参数为预览图片的url            preloader.destroy();            preloader = null;        };        preloader.load( file.getSource() );    }}

0 0