WebUploader 上传图片回显
/* fileMaxCount 最大文件数 buttonText 按钮文本 multiple 是否多选 */ (function ($) { $.fn.extend({ uploadImg: function (opt) { var webUploader; //可行性判断 if (!WebUploader.Uploader.support()) { alert('Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器'); throw new Error('WebUploader does not support the browser you are using.'); } if (typeof opt != "object") { alert('参数错误!'); return; } (function (opt, $uploaderDiv) { // 可能有pedding, ready, uploading, confirm, done. var state = 'pedding', // 添加的文件数量 fileCount = 0, // 优化retina, 在retina下这个值是2 //ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 700, thumbnailHeight = 700, // 判断浏览器是否支持图片的base64 isSupportBase64 = (function () { var data = new Image(); var support = true; data.onload = data.onerror = function () { if (this.width != 1 || this.height != 1) { support = false; } } data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; return support; })(), // $uploaderDiv = $(this), $uploaderDivId = $uploaderDiv.attr('id'), //图片容器 $queue = $uploaderDiv.find('ul.filelist').length > 0 ? $("ul.filelist") : $('<ul class="filelist"></ul>').appendTo($uploaderDiv), //拖拽区域 $dndDiv = $('<div id="dndArea_' + $uploaderDivId + '" class="placeholder">').appendTo($uploaderDiv), $dndDivId = $dndDiv.attr('id'), //点选区域 $pickerDiv = $(' <div id="filePicker_' + $uploaderDivId + '"></div>').appendTo($dndDiv), $pickerDivId = $pickerDiv.attr('id'); //迭代出默认配置 $.each(getOption('#' + $uploaderDivId), function (key, value) { opt[key] = opt[key] || value; }); opt = $.extend(true, {}, opt, { dnd: '#' + $dndDivId, paste: '#' + $uploaderDivId, //按钮容器; pick: { id: '#' + $pickerDivId, label: '<i class="fa icon-create"></i><p class="filePickerText"><span>添加图片</span><br/>（最多' + (opt.fileMaxCount ? opt.fileMaxCount : opt['fileNumLimit']) + '张）</p>', multiple: true }, }); if (opt.buttonText) { opt['pick']['label'] = opt.buttonText; delete opt.buttonText; } if (!opt.multiple) { opt['pick']['multiple'] = opt.multiple; delete opt.multiple; } if (opt.fileMaxCount) { opt['fileNumLimit'] = opt.fileMaxCount; delete opt.fileMaxCount; } webUploader = WebUploader.create(opt); //if (!WebUploader.Uploader.support()) { // alert(' 上传组件不支持您的浏览器！'); // return false; //} //绑定文件加入队列事件; webUploader.on('fileQueued', function (file) { if (fileCount == opt.fileNumLimit) { return NotifyDanger('上传文件数量超过限制!'); } fileCount++; addFile(file); if (opt.fileNumLimit === fileCount) { setState('ready'); } }); webUploader.on('fileDequeued', function (file) { fileCount--; if (!fileCount || fileCount < opt.fileNumLimit) { setState('pedding'); } removeFile(file); }); // 拖拽时不接受 js, txt 文件。 webUploader.on('dndAccept', function (items) { var denied = false, len = items.length, i = 0, // 修改js类型 unAllowed = 'text/plain;application/javascript '; for (; i < len; i++) { // 如果在列表里面 if (~unAllowed.indexOf(items[i].type)) { denied = true; break; } } return !denied; }); //选择文件错误触发事件; webUploader.on('error', function (code) { var text = ''; switch (code) { case 'F_DUPLICATE': text = '该文件已经被选择了!'; break; case 'Q_EXCEED_NUM_LIMIT': text = '上传文件数量超过限制!'; break; case 'F_EXCEED_SIZE': text = '文件大小不能超过1M!'; break; case 'Q_EXCEED_SIZE_LIMIT': text = '所有文件总大小超过限制!'; break; case 'Q_TYPE_DENIED': text = '文件类型不正确或者是空文件!'; break; default: text = '未知错误!'; break; } NotifyDanger(text); }); webUploader.on('all', function (type) { switch (type) { case 'uploadFinished': setState('confirm'); break; case 'startUpload': setState('uploading'); break; case 'stopUpload': setState('paused'); break; } }) function setState(val) { if (val === state) { return; } state = val; switch (state) { case 'pedding': $dndDiv.removeClass('element-invisible'); //$queue.hide(); webUploader.refresh(); break; case 'ready': $dndDiv.addClass('element-invisible'); //$queue.show(); webUploader.refresh(); break; } } // 当有文件添加进来时执行，负责view的创建 function addFile(file) { var $li = $('<li id="' + file.id + '">' + //'<p class="title">' + file.name + '</p>' + '<a href="" class="linkA" data-fancybox="group" data-caption=""><p class="imgWrap"></p></a>' + //'<p class="progress"><span></span></p>' + '</li>'), $btns = $('<div class="file-panel">' + '<span class="cancel">删除</span></div>').appendTo($li), $prgress = $li.find('p.progress span'), $wrap = $li.find('p.imgWrap'), $info = $('<p class="error"></p>'), $link = $li.find('a.linkA'); showError = function (code) { switch (code) { case 'exceed_size': text = '文件大小超出'; break; case 'interrupt': text = '上传暂停'; break; default: text = '上传失败，请重试'; break; } $info.text(text).appendTo($li); }; if (file.getStatus() === 'invalid') { showError(file.statusText); } else { // @todo lazyload $wrap.text('预览中'); webUploader.makeThumb(file, function (error, src) { if (error) { $wrap.text('不能预览'); return; } if (isSupportBase64) { var img = $('<img src="' + src + '">'); $wrap.empty().append(img); $link.attr('href', src); } else { $wrap.text("预览出错"); } }, thumbnailWidth, thumbnailHeight); } file.on('statuschange', function (cur, prev) { if (prev === 'progress') { $prgress.hide().width(0); } else if (prev === 'queued') { $li.off('mouseenter mouseleave'); $btns.remove(); } // 成功 if (cur === 'error' || cur === 'invalid') { console.log(file.statusText); showError(file.statusText); } else if (cur === 'interrupt') { showError('interrupt'); } else if (cur === 'queued') { } else if (cur === 'progress') { $info.remove(); $prgress.css('display', 'block'); } else if (cur === 'complete') { $li.append('<span class="success"></span>'); } $li.removeClass('state-' + prev).addClass('state-' + cur); }); $li.on('mouseenter', function () { $btns.stop().animate({ height: 30 }); }); $li.on('mouseleave', function () { $btns.stop().animate({ height: 0 }); }); $btns.on('click', 'span', function () { webUploader.removeFile(file); //if (supportTransition) { // deg = 'rotate(' + file.rotation + 'deg)'; // $wrap.css({ // '-webkit-transform': deg, // '-mos-transform': deg, // '-o-transform': deg, // 'transform': deg // }); //} else { // $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')'); // // use jquery animate to rotation // // $({ // // rotation: rotation // // }).animate({ // // rotation: file.rotation // // }, { // // easing: 'linear', // // step: function( now ) { // // now = now * Math.PI / 180; // // var cos = Math.cos( now ), // // sin = Math.sin( now ); // // $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')"); // // } // // }); //} }); $li.appendTo($queue); } // 负责view的销毁 function removeFile(file) { var $li = $('#' + file.id); $li.remove(); } })(opt, $(this)) //以下是图片回显的重点内容：先将图片转成File类型，然后通过addFiles把图片添加到队列。参考：https://segmentfault.com/q/1010000007428390 var pictureObj = new Object(); pictureObj.getPictures = function (opt) { if (opt.pictures) { //convertBase64UrlToBlob var getFileBlob = function (url, cb) { var bytes = window.atob(url); //去掉url的头，并转换为byte //处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } cb(new Blob([ab], { type: 'image/jpeg' })); }; var blobToFile = function (blob, name) { blob.lastModifiedDate = new Date(); blob.name = name; return blob; }; var getFileObject = function (filePathOrUrl, cb) { getFileBlob(filePathOrUrl, function (blob) { cb(blobToFile(blob, 'test.jpg')); }); }; var pictures = opt.pictures.split(','); $.each(pictures, function (index, item) { getFileObject(item, function (fileObject) { var wuFile = new WebUploader.Lib.File(WebUploader.guid('rt_'), fileObject); var file = new WebUploader.File(wuFile); webUploader.addFiles(file) }) }) } } return pictureObj; } }) })(jQuery) //Web Uploader默认配置; function getOption(objId) { /* * 配置文件同webUploader一致,这里只给出默认配置. * 具体参照:http://fex.baidu.com/webuploader/doc/index.html */ return { //按钮容器; pick: { id: objId, label: '<i class="fa icon- create"></i><p class="filePickerText"><span>点击添加图片</span></p>',//'<i class="fa icon-create"></i><p class="filePickerText"><span>添加图片</span><br/>（最多20张）</p>', multiple: true }, //类型限制; //accept: { // title: "Images", // extensions: "gif,jpg,jpeg,bmp,png,ico", // mimeTypes: "image/*" //}, //配置生成缩略图的选项 thumb: { width: 170, height: 150, // 图片质量，只有type为`image/jpeg`的时候才有效。 quality: 70, // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false. allowMagnify: false, // 是否允许裁剪。 crop: false, // 为空的话则保留原有图片格式。 // 否则强制转换成指定的类型。 type: "image/jpeg" }, //文件上传方式 method: "POST", tyty //fh; tguty server: "", //是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容 sendAsBinary: false, // 开起分片上传。 thinkphp的上传类测试分片无效,图片丢失; chunked: true, // 分片大小 chunkSize: 512 * 1024, //最大上传的文件数量, 总文件大小,单个文件大小(单位字节); fileNumLimit: 50, fileSizeLimit: 10240 * 1024, fileSingleSizeLimit: 1024 * 1024, }; } ////实例化Web Uploader //function getUploader(opt) { // return new WebUploader.Uploader(opt); //
前台调用方式：
this.init_uploader_picture = function () { //实例化并绑定药品图片 $('#uploader_picture').uploadImg({ fileMaxCount: 1, multiple: false, //pictures: self.form.picture() }).getPictures({ pictures: self.form.picture() }); }
方式二：
/* fileMaxCount 最大文件数 buttonText 按钮文本 multiple 是否多选 pictures base64图片，以逗号隔开 */ (function ($) { $.fn.extend({ diyUpload: function (opt) { //可行性判断 if (!WebUploader.Uploader.support()) { alert('Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器'); throw new Error('WebUploader does not support the browser you are using.'); } if (typeof opt != "object") { alert('参数错误!'); return; } (function (opt, $uploaderDiv) { // 可能有pedding, ready, uploading, confirm, done. var state = 'pedding', // 添加的文件数量 fileCount = 0, // 优化retina, 在retina下这个值是2 //ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 700, thumbnailHeight = 700, // 判断浏览器是否支持图片的base64 isSupportBase64 = (function () { var data = new Image(); var support = true; data.onload = data.onerror = function () { if (this.width != 1 || this.height != 1) { support = false; } } data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; return support; })(), // $uploaderDiv = $(this), $uploaderDivId = $uploaderDiv.attr('id'), //图片容器 $queue = $uploaderDiv.find('ul.filelist').length > 0 ? $("ul.filelist") : $('<ul class="filelist"></ul>').appendTo($uploaderDiv), //拖拽区域 $dndDiv = $('<div id="dndArea_' + $uploaderDivId + '" class="placeholder">').appendTo($uploaderDiv), $dndDivId = $dndDiv.attr('id'), //点选区域 $pickerDiv = $(' <div id="filePicker_' + $uploaderDivId + '"></div>').appendTo($dndDiv), $pickerDivId = $pickerDiv.attr('id'); //迭代出默认配置 $.each(getOption('#' + $uploaderDivId), function (key, value) { opt[key] = opt[key] || value; }); opt = $.extend(true, {}, opt, { dnd: '#' + $dndDivId, paste: '#' + $uploaderDivId, //按钮容器; pick: { id: '#' + $pickerDivId, label: '<i class="fa icon-create"></i><p class="filePickerText"><span>添加图片</span><br/>（最多' + (opt.fileMaxCount ? opt.fileMaxCount : opt['fileNumLimit']) + '张）</p>', multiple: true }, }); if (opt.buttonText) { opt['pick']['label'] = opt.buttonText; delete opt.buttonText; } if (opt.multiple) { opt['pick']['multiple'] = opt.multiple; delete opt.multiple; } if (opt.fileMaxCount) { opt['fileNumLimit'] = opt.fileMaxCount; delete opt.fileMaxCount; }
//图片回显的另一种方式
if (opt.pictures) { var pictures = opt.pictures.split(','); for (var i = 0; i < pictures.length; i++) { fileCount++; (function () { //加载原来的图片 var href = "data:image/jpeg;base64," + pictures[i], $li = $('<li id="PIC_WU_FILE_' + i.toString() + '">\ <a href="' + href + '" class="linkA" data-fancybox="group" data-caption=""><p class="imgWrap"><img src="' + href + '"/></p></a>\ </li>'), $btns = $('<div class="file-panel">\ <span class="cancel">删除</span>\ </div>').appendTo($li); $li.appendTo($queue); $li.on('mouseenter', function () { $btns.stop().animate({ height: 30 }); }); $li.on('mouseleave', function () { $btns.stop().animate({ height: 0 }); }); $btns.on('click', 'span', function () { $(this).parent().parent().remove(); fileCount--; if (!fileCount || fileCount < opt.fileNumLimit) { $dndDiv.removeClass('element-invisible'); } }); })(i) } //上传照片数量等于限制数量时，隐藏上传按钮 if (pictures.length > 0 && opt.fileNumLimit && opt.fileNumLimit == fileCount) { $dndDiv.addClass('element-invisible'); } //重新设置限制文件个数参数 if (fileCount > 0) { opt['fileNumLimit'] = opt.fileNumLimit - fileCount; fileCount = 0; } } var webUploader = WebUploader.create(opt); //if (!WebUploader.Uploader.support()) { // alert(' 上传组件不支持您的浏览器！'); // return false; //} //绑定文件加入队列事件; webUploader.on('fileQueued', function (file) { fileCount++; addFile(file); if (opt.fileNumLimit === fileCount) { setState('ready'); } }); webUploader.on('fileDequeued', function (file) { fileCount--; if (!fileCount || fileCount < opt.fileNumLimit) { setState('pedding'); } removeFile(file); }); // 拖拽时不接受 js, txt 文件。 webUploader.on('dndAccept', function (items) { var denied = false, len = items.length, i = 0, // 修改js类型 unAllowed = 'text/plain;application/javascript '; for (; i < len; i++) { // 如果在列表里面 if (~unAllowed.indexOf(items[i].type)) { denied = true; break; } } return !denied; }); //选择文件错误触发事件; webUploader.on('error', function (code) { var text = ''; switch (code) { case 'F_DUPLICATE': text = '该文件已经被选择了!'; break; case 'Q_EXCEED_NUM_LIMIT': text = '上传文件数量超过限制!'; break; case 'F_EXCEED_SIZE': text = '文件大小不能超过1M!'; break; case 'Q_EXCEED_SIZE_LIMIT': text = '所有文件总大小超过限制!'; break; case 'Q_TYPE_DENIED': text = '文件类型不正确或者是空文件!'; break; default: text = '未知错误!'; break; } NotifyDanger(text); //alert(text); }); webUploader.on('all', function (type) { switch (type) { case 'uploadFinished': setState('confirm'); break; case 'startUpload': setState('uploading'); break; case 'stopUpload': setState('paused'); break; } }) function setState(val) { if (val === state) { return; } state = val; switch (state) { case 'pedding': $dndDiv.removeClass('element-invisible'); //$queue.hide(); webUploader.refresh(); break; case 'ready': $dndDiv.addClass('element-invisible'); //$queue.show(); webUploader.refresh(); break; } } // 当有文件添加进来时执行，负责view的创建 function addFile(file) { var $li = $('<li id="' + file.id + '">' + //'<p class="title">' + file.name + '</p>' + '<a href="" class="linkA" data-fancybox="group" data-caption=""><p class="imgWrap"></p></a>' + //'<p class="progress"><span></span></p>' + '</li>'), $btns = $('<div class="file-panel">' + '<span class="cancel">删除</span></div>').appendTo($li), $prgress = $li.find('p.progress span'), $wrap = $li.find('p.imgWrap'), $info = $('<p class="error"></p>'), $link = $li.find('a.linkA'); showError = function (code) { switch (code) { case 'exceed_size': text = '文件大小超出'; break; case 'interrupt': text = '上传暂停'; break; default: text = '上传失败，请重试'; break; } $info.text(text).appendTo($li); }; if (file.getStatus() === 'invalid') { showError(file.statusText); } else { // @todo lazyload $wrap.text('预览中'); webUploader.makeThumb(file, function (error, src) { if (error) { $wrap.text('不能预览'); return; } if (isSupportBase64) { var img = $('<img src="' + src + '">'); $wrap.empty().append(img); $link.attr('href', src); } else { $wrap.text("预览出错"); } }, thumbnailWidth, thumbnailHeight); } file.on('statuschange', function (cur, prev) { if (prev === 'progress') { $prgress.hide().width(0); } else if (prev === 'queued') { $li.off('mouseenter mouseleave'); $btns.remove(); } // 成功 if (cur === 'error' || cur === 'invalid') { console.log(file.statusText); showError(file.statusText); } else if (cur === 'interrupt') { showError('interrupt'); } else if (cur === 'queued') { } else if (cur === 'progress') { $info.remove(); $prgress.css('display', 'block'); } else if (cur === 'complete') { $li.append('<span class="success"></span>'); } $li.removeClass('state-' + prev).addClass('state-' + cur); }); $li.on('mouseenter', function () { $btns.stop().animate({ height: 30 }); }); $li.on('mouseleave', function () { $btns.stop().animate({ height: 0 }); }); $btns.on('click', 'span', function () { webUploader.removeFile(file); //if (supportTransition) { // deg = 'rotate(' + file.rotation + 'deg)'; // $wrap.css({ // '-webkit-transform': deg, // '-mos-transform': deg, // '-o-transform': deg, // 'transform': deg // }); //} else { // $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')'); // // use jquery animate to rotation // // $({ // // rotation: rotation // // }).animate({ // // rotation: file.rotation // // }, { // // easing: 'linear', // // step: function( now ) { // // now = now * Math.PI / 180; // // var cos = Math.cos( now ), // // sin = Math.sin( now ); // // $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')"); // // } // // }); //} }); $li.appendTo($queue); } // 负责view的销毁 function removeFile(file) { var $li = $('#' + file.id); $li.remove(); } })(opt, $(this)) } }) })(jQuery) //Web Uploader默认配置; function getOption(objId) { /* * 配置文件同webUploader一致,这里只给出默认配置. * 具体参照:http://fex.baidu.com/webuploader/doc/index.html */ return { //按钮容器; pick: { id: objId, label: '<i class="fa icon- create"></i><p class="filePickerText"><span>点击添加图片</span></p>',//'<i class="fa icon-create"></i><p class="filePickerText"><span>添加图片</span><br/>（最多20张）</p>', multiple: true }, //类型限制; //accept: { // title: "Images", // extensions: "gif,jpg,jpeg,bmp,png,ico", // mimeTypes: "image/*" //}, //配置生成缩略图的选项 thumb: { width: 170, height: 150, // 图片质量，只有type为`image/jpeg`的时候才有效。 quality: 70, // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false. allowMagnify: false, // 是否允许裁剪。 crop: false, // 为空的话则保留原有图片格式。 // 否则强制转换成指定的类型。 type: "image/jpeg" }, //文件上传方式 method: "POST", //服务器地址; server: "", //是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容 sendAsBinary: false, // 开起分片上传。 thinkphp的上传类测试分片无效,图片丢失; chunked: true, // 分片大小 chunkSize: 512 * 1024, //最大上传的文件数量, 总文件大小,单个文件大小(单位字节); fileNumLimit: 50, fileSizeLimit: 10240 * 1024, fileSingleSizeLimit: 1024 * 1024, }; } ////实例化Web Uploader //function getUploader(opt) { // return new WebUploader.Uploader(opt); //}
前台调用方式：
this.init_uploader_picture = function () { //实例化并绑定药品图片 $('#uploader_picture').uploadImg({ fileMaxCount: 1, multiple: false, pictures: self.form.picture() }); }
