WebUploader 上传图片回显
生活随笔
收集整理的這篇文章主要介紹了
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,// 判斷瀏覽器是否支持圖片的base64isSupportBase64 = (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/1010000007428390var pictureObj = new Object();pictureObj.getPictures = function (opt) {if (opt.pictures) {//convertBase64UrlToBlobvar 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);
//
//圖片回顯的另一種方式
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() }).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,// 判斷瀏覽器是否支持圖片的base64isSupportBase64 = (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()});}?
轉載于:https://www.cnblogs.com/SunXiaoLin/p/11002585.html
總結
以上是生活随笔為你收集整理的WebUploader 上传图片回显的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信小程序打开PDF
- 下一篇： 如何将Android的AOSP仓库放置到