🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
**使用plupload创建上传图片的页面** 先建立一个plupload上传图片的页面,以下代码是关键部分。 ```html ……省略部分代码…… <div id="uploadContainer"> <input type="button" value="选择文件" id="btnBrowse"/> <input type="button" value="上传文件" id="btnUpload"> <ul id="fileList"></ul> </div> ……省略部分代码…… <!--引入jquery、plupload.js--> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="plupload/plupload.full.min.js"></script> <script type="text/javascript"> $(function(){ //获取dom节点 var $uploadContainer = $('#uploadContainer'), $fileList = $('#fileList'), $btnUpload = $('#btnUpload'); //实例化一个上传对象 var uploader = new plupload.Uploader({ browse_button: 'btnBrowse', url: 'upload.ashx', flash_swf_url: 'plupload/Moxie.swf', sliverlight_xap_url: 'plupload/Moxie.xap', filters: { mime_types: [ //只允许上传图片文件 (注意,extensions中,逗号后面不要加空格) { title: "图片文件", extensions: "jpg,gif,png,bmp" } ] } }); //存储所有图片的url地址 var urls = []; //初始化 uploader.init(); //绑定文件添加到队列的事件 uploader.bind('FilesAdded', function (uploader, files) { //显示添加进来的文件名 $.each(files, function(key, value){ var fileName = value.name, html = '<li>' + fileName + '</li>'; $fileList.append(html); }); }); //单个文件上传之后 uploader.bind('FileUploaded', function (uploader, file, responseObject) { //注意,要从服务器返回图片的url地址,否则上传的图片无法显示在编辑器中 var url = responseObject.response; //先将url地址存储来,待所有图片都上传完了,再统一处理 urls.push(url); }); //全部文件上传时候 uploader.bind('UploadComplete', function (uploader, files) { // 用 try catch 兼容IE低版本的异常情况 try { //打印出所有图片的url地址 $.each(urls, function (key, value) { console.log(value); }); } catch (ex) { // 此处可不写代码 } finally { //清空url数组 urls = []; //清空显示列表 $fileList.html(''); } }); //上传事件 $btnUpload.click(function(){ uploader.start(); }); }); </script> ``` 要保证这个图片能正常上传图片文件!