2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

先說(shuō)說(shuō)為啥要擴(kuò)展？

webupload是百度團(tuán)隊(duì)開(kāi)源的一塊非常優(yōu)秀的上傳插件提供分片、并發(fā)、壓縮等（http://fex.baidu.com/webuploader/），不提供界面ui需要用戶(hù)自己設(shè)計(jì)界面。我的需求是一個(gè)頁(yè)面需要?jiǎng)討B(tài)創(chuàng)建多個(gè)webupload對(duì)象，這就造成了頁(yè)面需要寫(xiě)n多行dom操作代碼。清除對(duì)象時(shí)需要預(yù)先用全局變量存儲(chǔ)動(dòng)態(tài)創(chuàng)建的對(duì)象，這代碼寫(xiě)著寫(xiě)著就變臃腫了，所以就擴(kuò)展成一個(gè)jquery插件的形式。

先來(lái)點(diǎn)效果再上代碼，沒(méi)精力折騰了，敲完撤。

代碼有css js 和圖片 ?css當(dāng)然是拷貝抄襲精簡(jiǎn)別人的了

ext-webuploader.js

/*** webUpload擴(kuò)展*/ ;(function($,$window) {//定義全局類(lèi)var UploadExt = $window.UploadExt ||{extList:{}//extObj對(duì)象集合};$window.UploadExt = UploadExt;//定義ExtObj類(lèi)構(gòu)造器function ExtObj(id,opt){this.id=id,this.defaults = {id:"", //當(dāng)前上傳容器唯一標(biāo)示name:"", //文件上傳成功后文件路徑接收域name值pathValues:"", //文件路徑type:"file", //類(lèi)型 file 或是 image,默認(rèn) filereadOnly:false, //是否只讀, 只讀不顯示選擇文件按鈕,只顯示 pathValues對(duì)應(yīng)的文件auto:false, //是否自動(dòng)上傳params:"", //這是上傳時(shí)需要傳遞的參數(shù)，拼接url后面多個(gè)參數(shù)以&分隔 extendParams:{}, //這是每個(gè)文件上傳時(shí)候需要傳遞的參數(shù)，類(lèi)似 css 寫(xiě)法buttonStyle:"btn-green btn-S", //按鈕顏色和大小 默認(rèn)-綠色小號(hào)fileNumLimit:3, //上傳最大文件數(shù) fileSingleSizeLimit:5*1024*1024,//單個(gè)文件大小限制(單位- [B])duplicate:true, //去重， 根據(jù)文件名字、文件大小和最后修改時(shí)間來(lái)生成 hash Keyextensions:null, //認(rèn)許文件后綴名buttonText:"選擇文件", //控件按鈕顯示文本fileVal:"file", //文件上傳域的name值url:"webUpload.do", //上傳urldownloadUrl:"webDownload.do?dbPath=",//默認(rèn)下載地址onSuccess:function(file,response){}, //上傳成功后的回調(diào)函數(shù)},this.options = $.extend({}, this.defaults, opt);}/*** 添加 獲取/構(gòu)建 extObj對(duì)象*/UploadExt.getExtObj = function(id,opt){var obj = this.extList[id];if (!obj && opt) {//不存在則通過(guò)參數(shù)創(chuàng)建對(duì)象//不存在則通過(guò)jquery插件方法構(gòu)造extObj對(duì)象obj = extList[id] =$("#"+id).extWebUploader(opt);}return obj;};/*** 銷(xiāo)毀百度webupload上傳對(duì)象*/UploadExt.destroy = function(id){var obj = this.extList[id];if (obj) {obj.uploader.destroy();delete this.extList[id];}};//擴(kuò)展jquery元素方法$.fn.extWebUploader = function(opt,paramObj) {Array.prototype.removeItem = function(val) {//給array對(duì)象添加方法var index = this.indexOf(val);if (index > -1) {this.splice(index, 1);}};//縮略圖大小暫時(shí)寫(xiě)死,也可以修改cssvar ratio = $window.devicePixelRatio || 1;var thumbnailWidth = 100 * ratio;var thumbnailHeight = 100 * ratio;//隨機(jī)數(shù)var randomFor = function(n) {var rnd = '';for (var i = 0; i < n; i++) {rnd += Math.floor(Math.random() * 10);}return rnd;};/*** 檢測(cè)是否支持base64*/var isSupportBase64 = function() {var data = new Image();var support = true;data.onload = data.onerror = function() {if (this.width != 1 || this.height != 1) {support = false;}}return support;};var getHtml = function(type,id,name,size){var html1="<div class='dz-preview' id='"+id+"' >";var html2img=" <div class='img-details'>";var html2file=" <div class='file-details'>";var html3="" +" <div class='dz-filename'>"+" <span>"+ name +"</span>"+" </div>"+" <div class='dz-size' data-dz-size=''>"+"" + size +" </div> ";var html4=" <img src='' />";var html5="" +" <div class='dz-progress' style='display:block;'>"+" <div class='progress'>"+" <div class='progress-bar progress-bar-success progress-bar-striped active' role='progressbar' " +" aria-valuenow='0' aria-valuemin='0' aria-valuemax='100' style='width:0%'></div>"+" </div>"+" </div>"+" <div class='dz-error-message'>"+" <span data-dz-errormessage=''></span>"+" </div>"+" </div>"+" <div class='dz-success-mark'></div>"+" <div class='dz-error-mark'></div> "+" <div class='del-btn' data-path=''>刪除</div>"+"</div>";var img_preview = html1 + html2img + html3 + html4 + html5;var file_preview= html1 + html2file + html3 + html5;if(type=="image"){return img_preview;}else{return file_preview;}};//換算大小值var getSize = function(size){if(size>1024*1024*1024){var val = Math.round((size/(1024*1024*1024))*100)/100;return "<strong>"+val+"</strong> GB";}else if(size>1024*1024){var val = Math.round((size/(1024*1024))*100)/100;return "<strong>"+val+"</strong> MB";}else if(size>1024){var val = Math.round((size/1024)*100)/100;return "<strong>"+val+"</strong> KB";}else if(size>1024){var val = Math.round(size*100)/100;return "<strong>"+val+"</strong> B";}else{return "<strong>---</strong>";}};//拆分文件名var mygetFileName = function(filepath) {if (filepath.lastIndexOf('\\') > 0) {return filepath.substring(filepath.lastIndexOf('\\') + 1);} else if (filepath.lastIndexOf('/') > 0) {return filepath.substring(filepath.lastIndexOf('/') + 1);} else {return filepath;}};//初始化jquery元素集,return方便鏈?zhǔn)秸{(diào)用return this.each(function() {var oo = $(this);var ooId=oo.attr("id");//獲取當(dāng)前容器idvar extObj;//顯示上傳圖片var showImg = function(src, id) {if (extObj.options['type']=="image") {$("#"+extObj.options['id']+id+" .img-details img").attr("src",src);}};//添加文件domvar addFileDom = function(file) {var $list = $('#'+extObj.options['id']+'_thelist');var id = extObj.options['id'] + file.id;var name = file.name;var size = file.size;if(extObj.options['fileNumLimit']==1){oo.prepend(getHtml(extObj.options['type'],id,name,size));}else{//多個(gè)文件$list.append(getHtml(extObj.options['type'],id,name,size));}//綁定刪除事件$("#"+extObj.options['id'] + file.id +" .del-btn").on('click',function() {var optpath = $("#"+extObj.options['id'] + file.id +" .del-btn").attr("data-path");if(optpath){$.post('webUpload.do',{path:optpath,isdel: "1"},function(data) {if (data.success) {extObj['exsitPathArr'].removeItem(optpath);$("#"+extObj.options['id'] + file.id).remove();//刪除dom$name = $('#'+extObj.options['id'] + " .fordel input[name='"+extObj.options['name']+"']");if ($name.length) {$name.val(extObj['exsitPathArr'].join(","));}if(file.type){extObj['uploader'].removeFile(file.id);//移除文件}}},'JSON');}else{$("#"+extObj.options['id'] + file.id).remove();//刪除domextObj['uploader'].removeFile(file.id);//移除文件if(file.type){extObj['uploader'].removeFile(file.id);//移除文件}}}); // //綁定下載事件 // $("#"+extObj.options['id'] + file.id +" .down-btn").on('click',function() { // var optpath = $('#'+extObj.options['id'] + file.id + " input[name='"+extObj.options['name']+"']").val(); // if(optpath){ // var downsrc = extObj.options['downloadUrl'] + optpath + '&down=1'; // location.href = downsrc; // } // }};//先判斷對(duì)象是否初始化過(guò)if(UploadExt.extList[ooId]){extObj = UploadExt.extList[ooId];//調(diào)用對(duì)應(yīng)方法if("getObj"==opt){return extObj.extWebUploader;}else if("addFile"==opt){//先判斷是否超過(guò)數(shù)量限制var num = $("#"+ooId+" DIV.dz-preview").length;if(num >= extObj.options['fileNumLimit']){tip('文件數(shù)量超標(biāo)');return extObj.extWebUploader;}//第二個(gè)參數(shù)對(duì)象為{path:'/test/stsets/abc.zip'}var path = paramObj.path.replace("\\","\\\\");extObj['exsitPathArr'].push(path);//將已存在的路徑添加到數(shù)組中$name = $('#'+ooId + " .fordel input[name='"+extObj.options['name']+"']");if (!$name.length) {oo.append( '<div class=\"fordel\"><input type=\"hidden\" name=\"'+extObj.options['name']+'\" value=\"'+path+'\" /></div>' );}else{$name.val(extObj['exsitPathArr'].join(","));}var singleSrc=extObj.options['downloadUrl']+path;var objFile = new Object();var sizeMatch=paramObj.size.match(/^\d+\.\d+/);var size=paramObj.size.replace(sizeMatch[1],"<strong>"+sizeMatch[1]+"</strong>");objFile['id']=randomFor(6);objFile['name']=mygetFileName(singleSrc);objFile['size']=size;objFile['Status']='complete';//設(shè)置狀態(tài)為上傳完成addFileDom(objFile);showImg(singleSrc,objFile['id']);$('#'+extObj.options['id'] + objFile['id']).addClass("dz-success");}}else{//初始化 構(gòu)建extObj對(duì)象var extObj =new ExtObj(ooId,opt);//oo表示當(dāng)前操作jquery元素對(duì)象extObj.options['id']= ooId;UploadExt.extList[ooId]=extObj;//將extObj存儲(chǔ)在list中if(extObj.options['fileNumLimit']>1){//上傳多個(gè)文件，增加list容器oo.append(" <div id=\""+extObj.options['id']+"_thelist\" class=\"uploader-list\"></div>");}oo.append(" <div class=\"btns\">" +" <div id=\""+extObj.options['id']+"_pick\">"+extObj.options['buttonText']+"</div>" +" </div>");//初始化webupload上傳組件var uploader = WebUploader.create({swf: '/plug-in/webuploader/Uploader.swf',server: extObj.options['url']+"?"+extObj.options['params'],pick: '#'+extObj.options['id']+"_pick",duplicate: extObj.options['duplicate'],resize: false,auto: extObj.options['auto'],fileVal: extObj.options['fileVal'],fileNumLimit: extObj.options['fileNumLimit'],fileSingleSizeLimit: extObj.options['fileSingleSizeLimit'],formData: extObj.options['extendParams'],accept:{extensions:extObj.options['extensions']}});//添加對(duì)象屬性 webupload對(duì)象extObj['uploader'] =uploader;extObj['extWebUploader']=this;//jquery對(duì)象extWebUploaderextObj['exsitPathArr']= new Array();//用戶(hù)存儲(chǔ)上傳成功的路徑數(shù)組//增加按鈕樣式$('#'+extObj.options['id']+"_pick").find('div:eq(0)').addClass('webuploader-pick '+extObj.options['buttonStyle']);//手動(dòng)上傳if(!extObj.options['auto']){$('#'+extObj.options['id']+"_pick").find('div:eq(0)').after("<div id='"+extObj.options['id']+"ctlBtn' class='upbtn btn-blue "+extObj.options['buttonStyle']+"'>開(kāi)始上傳</div>");var state = 'pending';//上傳狀態(tài)、當(dāng)前等待狀態(tài)var $btn=$("#"+extObj.options['id']+"ctlBtn");$btn.on('click', function (){if (state === 'uploading'){uploader.stop();} else {uploader.upload();}});uploader.on('all',function (type){if (type === 'startUpload'){state = 'uploading';$btn.text('暫停上傳');}else if (type === 'stopUpload'){state = 'paused';$btn.text('開(kāi)始上傳');} else if (type === 'uploadFinished'){state = 'done';$btn.text('開(kāi)始上傳');}});}if(extObj.options['readOnly'] || extObj.options['readOnly'] == "readOnly"){$("#"+extObj.options['id']+"ctlBtn").css('display','none');//隱藏開(kāi)始上傳$("#"+extObj.options['id']+"_pick").css('display','none');//隱藏選擇文件按鈕}var addFile = function(file, filepath) {uploader.makeThumb(file,function(error, src) {if (error) {return false;}if (isSupportBase64()) {if (filepath == '') {showImg(src, file.id);}} else if (filepath != '') {var actSrc = extObj.options['downloadUrl'] + filepath;showImg(actSrc, file.id);}},thumbnailWidth, thumbnailHeight);};//設(shè)置默認(rèn)值if(null!=extObj.options['pathValues'] && extObj.options['pathValues'] !="" ){var pvs = extObj.options['pathValues'].replace("\\","\\\\");oo.append( '<div class=\"fordel\"><input type=\"hidden\" name=\"'+extObj.options['name']+'\" value=\"'+pvs+'\" /></div>' );extObj['exsitPathArr']=pvs.split(',');//將默認(rèn)值按逗號(hào)拆分添加到數(shù)組中for(var a = 0; a< extObj['exsitPathArr'].length; a++){var singlePath=extObj['exsitPathArr'][a];if(''!=singlePath){var singleSrc=extObj.options['downloadUrl']+singlePath;var objFile = new Object();objFile['id']=a;objFile['name']=mygetFileName(singlePath);objFile['Status']='complete';//設(shè)置狀態(tài)為上傳完成objFile['size']="未知";addFileDom(objFile);showImg(singleSrc,objFile['id']);$("#"+extObj.options['id'] + objFile['id'] +" .del-btn").attr("data-path",singlePath);//添加文件路徑$('#'+extObj.options['id'] + objFile['id']).addClass("dz-success");}}}//當(dāng)文件被加入隊(duì)列之前觸發(fā)uploader.on('beforeFileQueued',function(file) {var num = $("#"+extObj.options['id']+" DIV.dz-preview").length;if(num >= extObj.options['fileNumLimit']){tip('文件數(shù)量超標(biāo)');return false;}return true;});//當(dāng)文件被加入隊(duì)列以后觸發(fā)uploader.on('fileQueued',function(file) {file.size=getSize(file.size);//將size轉(zhuǎn)換addFileDom(file);addFile(file,"");});//上傳過(guò)程中觸發(fā)，攜帶上傳進(jìn)度uploader.on('uploadProgress',function(file, percentage) {var $div = $('#'+extObj.options['id']+ file.id),$percent = $div.find('.progress .progress-bar');$percent.css('width', parseInt(percentage * 100)+'%');$percent.attr("aria-valuenow",parseInt(percentage * 100));});//當(dāng)文件上傳成功時(shí)觸發(fā)uploader.on('uploadSuccess',function(file, response) {if (response.success) {var filepath = response[""+extObj.options['name']+""] || response.obj;extObj['exsitPathArr'].push(filepath);//上傳車(chē)成功后添加到數(shù)組中$name = $('#'+extObj.options['id'] + " .fordel input[name='"+extObj.options['name']+"']");if (!$name.length) {oo.append( '<div class=\"fordel\"><input type=\"hidden\" name=\"'+extObj.options['name']+'\" value=\"'+filepath+'\" /></div>' );}else{$name.val(extObj['exsitPathArr'].join(","));}addFile(file, filepath);//如果是圖片顯示對(duì)應(yīng)圖片$('#'+extObj.options['id'] + file.id).addClass("dz-success");$("#"+extObj.options['id'] + file.id +" .del-btn").attr("data-path",filepath);//添加文件路徑} else {$('#'+extObj.options['id'] + file.id).addClass("dz-error");var errorMsg = $('#'+extObj.options['id'] + file.id+" .dz-error-message span");errorMsg.html("上傳出錯(cuò)" + response.msg);errorMsg.data("dz-errormessage","上傳出錯(cuò)" + response.msg);}extObj.options.onSuccess(file, response);});uploader.on('uploadError', function(file, reason) {$('#'+extObj.options['id'] + file.id).addClass("dz-error");var errorMsg = $('#'+extObj.options['id'] + file.id+" .dz-error-message span");errorMsg.html("上傳出錯(cuò)-code:" + reason);errorMsg.data("dz-errormessage","上傳出錯(cuò)-code:" + reason);});uploader.on('error',function(type) {if (type == 'Q_TYPE_DENIED') {$window.tip('文件類(lèi)型不識(shí)別');}if (type == 'Q_EXCEED_NUM_LIMIT') {$window.tip('文件數(shù)量超標(biāo)');}if (type == 'F_DUPLICATE') {$window.tip('相同文件請(qǐng)不要重復(fù)上傳');}if (type == 'F_EXCEED_SIZE') {$window.tip('單個(gè)文件大小超標(biāo)');}if (type == 'Q_EXCEED_SIZE_LIMIT') {$window.tip('文件大小超標(biāo)');}});uploader.on('uploadComplete',function(file) {var $div = $('#'+extObj.options['id']+ file.id).find('.dz-progress');$div.fadeOut('slow');});}});}; })(jQuery,window);

ext-webuploader.css

.dz-preview * {box-sizing: border-box;} .dz-preview{box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);font-size: 14px;background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;border: 1px solid #acacac;display: inline-block;padding: 6px;position: relative; } .dz-preview.file-preview{display:block;} .dz-preview .img-details,.dz-preview .file-details{background: #ebebeb none repeat scroll 0 0;height: 100px;width: 100px;margin-bottom: 22px;padding: 5px;position: relative; } .dz-preview .file-details{height: 40px;width: 200px;} .dz-preview .dz-filename{display: block;height: 100%;width:100%;line-height:1.4;word-wrap:break-word;overflow: hidden; } .dz-preview .dz-size{position:absolute;left:3px;bottom:-28px;height:28px;line-height:28px;overflow: hidden; } .dz-preview .img-details img{position:absolute;top:0;left:0;width:100%;height:100%; } .dz-preview .img-details:hover img{opacity:0.1;} .dz-preview.dz-error .img-details:hover img{opacity:1;} .dz-preview .dz-progress{background: #d7d7d7 none repeat scroll 0 0;position: absolute;height:6px;bottom:0px;right:0;left:0;display:none; } .dz-preview.dz-success .dz-progress{display: block;opacity: 0;transition: opacity 0.4s ease-in-out 0s;} .dz-preview .dz-progress .progress{border-radius:0;height:100%;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;margin-bottom: 20px;overflow: hidden; } .dz-preview .progress-bar-striped,.dz-preview .progress-striped .progress-bar {background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-size: 14px 14px; } .dz-preview .progress-bar.active, .dz-preview .progress.active .progress-bar {animation: 2s linear 0s normal none infinite running progress-bar-stripes; }@-webkit-keyframes progress-bar-stripes {from {background-position: 40px 0;}to {background-position: 0 0;} } @-o-keyframes progress-bar-stripes {from { background-position: 40px 0;}to {background-position: 0 0;} } @keyframes progress-bar-stripes {from {background-position: 40px 0;}to {background-position: 0 0;} } .dz-preview .progress-bar {background-color: #337ab7;box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;color: #fff;float: left;font-size: 12px;height: 100%;line-height: 20px;text-align: center;transition: width 0.6s ease 0s;width: 0; } .dz-preview .progress-bar-success {background-color: #5cb85c; }.dz-preview .dz-success-mark, .dz-preview .dz-error-mark{position: absolute;top: 5px;right: 5px;height: 40px;width: 40px;text-align: center;background-image: url("image/spritemap.png");background-repeat: no-repeat;display: black;opacity: 0;transition: opacity 0.4s ease-in-out 0s; } .dz-preview .dz-success-mark{background-position: -268px -163px;color: #8cc657;} .dz-preview .dz-error-mark{background-position: -268px -123px;color: #ee162d;} .dz-preview.dz-success .dz-success-mark,.dz-preview.dz-error .dz-error-mark{filter: none;opacity: 1;} .dz-preview .dz-error-message{position: absolute;left:0px;top:0px;width: 100%;height:100%;background: rgba(245, 245, 245, 0.8) none repeat scroll 0 0;color: #800;padding: 5px 5px;z-index: 0;display:none; } .dz-preview.dz-error .dz-error-message{z-index:10;transition: opacity 0.3s ease-in-out 0s;} .dz-preview.dz-error:hover .dz-error-message{display: block;opacity:0.9;} .dz-preview .del-btn{position:absolute;right:6px;bottom:0px;height:28px;line-height:28px;overflow: hidden;font-size:12px;color: #800;cursor:pointer;}

頁(yè)面調(diào)用代碼就非常精簡(jiǎn)

//初始化上傳組件 $('#content_dom'+index).extWebUploader({ name: 'content', auto:false, type:"image",buttonStyle:'btn-green btn-S', buttonText:'選擇圖片', fileNumLimit:1, fileSingleSizeLimit:1024*1024*1024*5, //最大5G duplicate:true, fileVal:'file', params:'upType=teachFormFile', });

?

轉(zhuǎn)載于:https://my.oschina.net/u/1377077/blog/917409

總結(jié)

以上是生活随笔為你收集整理的扩展webupload插件，增加ui界面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。