Html
<div class="row" style="margin-left: 5px">
<h2><strong>home>公司列表</strong></h2>
<!--普通上传(upload为jQuery.upload.min.js添加的id)-->
<button id="btn_JqueryUpload" type="button" class="btn btn-info btn-sm" onclick="document.getElementById('upload').click();" style="margin-left: 10px">
<i class="fa fa-file-excel-o"></i>导入
</button>
<!--想办法隐藏原上传框(通过设置高度为0实现)-->
<div style="height:0px;overflow:auto">
<div class="upload" id="jqueryUpload" name="jqueryUpload" action="/company/uploadExcel" data-num="1" data-type="csv,xls,xlsx" data-size="10240" data-value=""></div>
</div>
</div>JS
//文件上传
$("#jqueryUpload").upload();控件JS(修改后的)
jQuery.upload.min.js
(function(a){a.fn.upload=function(D){var r=a(this),w="<li class='item'></li>",A=a('<li class="item add"><svg class="icon" viewBox="0 0 1024 1024" version="1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><style/></defs><path d="M737 436a174 174 0 0 1 172 172 172 172 0 0 1-172 172c-69 1-69 107 0 106 152-2 276-125 278-278S886 332 737 330c-69-1-69 105 0 106zM285 779a174 174 0 0 1-172-172 172 172 0 0 1 172-172c68-1 69-106 0-106A282 282 0 0 0 7 607a281 281 0 0 0 278 278c69 1 68-105 0-106z" fill="#4A5699"/><path d="M340 384a174 174 0 0 1 172-172 172 172 0 0 1 172 172c1 68 106 68 106 0a282 282 0 0 0-278-278 281 281 0 0 0-278 278c-1 68 105 68 106 0z" fill="#C45FA0"/><path d="M545 473c17 17 17 43 0 60L422 656a42 42 0 0 1-60-60l123-123c17-16 43-16 60 0z" fill="#F39A2B"/><path d="M485 473c17-16 44-16 60 0l123 123a42 42 0 0 1-60 60L485 533a42 42 0 0 1 0-60z" fill="#F39A2B"/><path d="M514 634c24 0 43 20 43 43v179a43 43 0 0 1-86 0V677c0-23 19-43 43-43z" fill="#E5594F"/></svg></li>'),e='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" class="progress"><g fill="rgba(17,89,164,0.1)"><path d="M 0 70 Q 75 39, 150 70 T 300 70 T 450 70 T 600 70 T 750 70 V 320 H 0 V 0"></path><animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-300" dur="1.5s" repeatCount="indefinite"></animateTransform></g><g fill="rgba(17,89,164,0.15)"><path d="M 0 70 Q 87.5 47, 175 70 T 350 70 T 525 70 T 700 70 T 875 70 T 1050 70 V 320 H 0 V 0"></path><animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-350" dur="3s" repeatCount="indefinite"></animateTransform></g></svg><div class="progressnum"></div>',g='<svg xmlns="http://www.w3.org/2000/svg" class="delete" version="1" viewBox="0 0 1024 1024"><path fill="#fff" d="M512 70a439 439 0 0 1 442 442 439 439 0 0 1-442 442A439 439 0 0 1 70 512 439 439 0 0 1 512 70m0-40a482 482 0 1 0 0 964 482 482 0 0 0 0-964zm114 253v-1c0-21-17-38-38-38H436c-21 0-38 17-38 38v1H282v74h460v-74H626zM321 396v346c0 21 17 38 38 38h306c21 0 38-17 38-38V396H321zm114 306h-76V474h76v228zm115 0h-76V474h76v228zm115 0h-76V474h76v228z"/></svg>',E='<svg xmlns="http://www.w3.org/2000/svg" class="look" version="1" viewBox="0 0 1024 1024"><path fill="#fff" d="M451 835a386 386 0 1 1 0-771 386 386 0 0 1 0 771zm0-675a291 291 0 1 0 0 581 291 291 0 0 0 0-581zm450 798c-15 0-30-5-42-17L658 740a58 58 0 0 1 83-82l201 201a58 58 0 0 1-41 99"/></svg>',d=a('<input type="file" name="file" id="upload" />'),b=a('<input type="hidden" />'),j,u,t,o,n,m,y,B={height:r.attr("data-height")?r.attr("data-height"):0,width:r.attr("data-width")?r.attr("data-width"):1920,type:r.attr("data-type")?r.attr("data-type"):"png,jpg,jpeg,gif",upname:r.attr("data-file")?r.attr("data-file"):"file",inputname:r.attr("data-name")?r.attr("data-name"):"upload",num:r.attr("data-num")?r.attr("data-num"):10,action:r.attr("action")?r.attr("action"):"/index.php",size:r.attr("data-size")?r.attr("data-size"):20480,value:r.attr("data-value")?r.attr("data-value"):""};r.append(A.attr("data-num",B.num).attr("data-type",B.type)).append(d.attr("multiple",B.num>1?"multiple":false)).append(b.attr("name",B.inputname)).addClass(B.num>1?"multiple":"one").on("click","li.add",function(){d.click()}).on("change","input[type='file']",function(H){var G=H.target.files;var i=[];for(var F in G){if(typeof G[F]=="object"){i.push(G[F])}}C(i)}).on("click","li.error",function(i){z(a(i.currentTarget))}).on("click","svg.delete",function(i){z(a(i.currentTarget).parent("li.success"))}).on("click","svg.look",function(i){if(D&&typeof D=="function"){D(r,a(i.currentTarget).parent("li.success").data("url"))}}).on("mousedown","li.success",function(I){var i=a(I.target);j=a(this);var J=j.offset();var H=r.offset();var G=J.left;var F=J.top;u=parseInt(G)+(I.pageX-parseInt(G))+(H.left-J.left);t=parseInt(F)+(I.pageY-parseInt(F))+(H.top-J.top);m=j.width()+2+j.css("margin-right").replace("px","")*1;y=j.height()+2+j.css("margin-bottom").replace("px","")*1;o=false;n=false});if(B.value){var p=B.value.split(","),s=0,h="";var f=0;for(var x in p){if(s<B.num&&p[s]){h=a("<li class='item success'></li>").append(g).append(typeof D=="function"?E:"").data("url",p[s]).attr("data-filename",c(p[s])).css("background-image","url('"+p[s]+"')").insertBefore(A);r.data("num",++f).removeClass("empty");q()}s++}}else{r.data("num",0).addClass("empty")}a(document).on("mousemove",function(G){if(j){var F=G.pageX-u;var J=G.pageY-t;var I=j.index();var H=r.offset();var i=r.height()?r.height():134;j.css({top:J,left:F,zIndex:999,position:"absolute"});o=G.pageX-H.left;n=G.pageY-H.top;if(n>(i+20)||n<0){j.addClass("delete")}else{j.removeClass("delete")}o=parseInt(o/m);n=parseInt(n/y);o=parseInt(o+(r.width()/m)*n);if(o>=I){o++}r.children("li").not(j).css("margin-left",0);r.children("li").eq(o).not(j).css("margin-left",m)}}).on("mouseup",function(){if(j){if(j.hasClass("delete")&&j.data("filename")){z(j);j=false;r.children("li").not(".add").css({"position":"relative","top":0,"left":0,"margin-left":0,"zIndex":0});r.children("li.add").css("margin-left",0);return false}var i=j.clone();i.data("url",j.data("url"));if(o!==false){if(o>=r.children("li").length){i.insertBefore(A)}else{i.insertBefore(r.children("li").eq(o))}j.remove();q();r.children("li").not(".add").css({"position":"relative","top":0,"left":0,"margin-left":0,"zIndex":0});r.children("li.add").css("margin-left",0)}}j=false}).on("dragenter",function(i){i.preventDefault()}).on("dragover",function(i){i.preventDefault();if(a(i.target).hasClass("upload")){r.addClass("dragenter")}else{r.removeClass("dragenter")}}).on("drop",function(H){H.preventDefault();r.removeClass("dragenter");var G=H.originalEvent.dataTransfer.files;var i=[];for(var F in G){if(typeof G[F]=="object"){i.push(G[F])}}C(i);return false});function C(H){var G=H;for(var F in G){if(typeof G[F]=="object"){var i=l(G[F],function(K,J,I){J.insertBefore(A);var L=new FormData();L.append(B.upname,K,I.name);r.removeClass("empty");a.ajax({url:B.action,type:"POST",data:L,dataType:"text",processData:false,contentType:false,success:function(M){M=JSON.parse(M);J.children("svg.progress").remove();J.children(".progressnum").remove();if(M.code){r.attr("data-value",M.msg);J.addClass("success").append(g).append(typeof D=="function"?E:"").data("url",M.msg);if(M.code==999){layer.alert(M.msg)}}else{J.addClass("error").attr("data-error",M.msg?M.msg:"服务端返回数据异常");layer.alert("服务端返回数据异常")}q()},xhr:function(){var M=new XMLHttpRequest();M.upload.addEventListener("progress",function(N){if(N.lengthComputable){var O=Math.round(N.loaded*100/N.total);J.children("svg.progress").css("height",50+(120*O/100)+"%");J.children(".progressnum").text(O)}},false);return M},error:function(){J.addClass("error").attr("data-error","上传失败,检查格式及文件大小！");layer.alert("上传失败,检查格式及文件大小！");q()}})})}}}function l(G,L){d.val("");if(B.num==1){r.children(".item").not(".add").remove()}else{if(B.num<=r.data("num")){return false}r.data("num",r.data("num")+1)}var F=G.size,J=G.name.toLowerCase().split(".").splice(-1).join(),i=a(w);var I=B.type.split(",");if(I.indexOf(J)<0){var K="不能上传."+J+"的文件!"}if(["png","jpg","jpeg","gif","bmp"].indexOf(J)<0&&F>B.size*1024){var K="不能上传大于."+B.size+"KB 的文件!"}if(K){i.append(k(J)).addClass("error").append("<div class='filename'>"+G.name+"</div>").attr("data-error",K).insertBefore(A);r.removeClass("empty");layer.alert(K);q();return false}var H=new FileReader();H.readAsDataURL(G);H.onload=function(){var P=c(G.name)+c(G.type)+c(G.size.toString())+c(H.result);if(r.children('li[data-filename="'+P+'"]').length>0){return false}i.attr("data-filename",P);if(["png","jpg","jpeg","gif","bmp"].indexOf(J)>=0){var O=new Image();O.src=H.result;O.onload=function(){var V=this;var X=V.width,T=V.height,S=X/T;if(B.width&&B.width<X){X=B.width;T=X/S}else{if(B.height&&T>B.height){T=B.height;X=T*S}}var Y=1;var Q=document.createElement("canvas");var aa=Q.getContext("2d");var W=document.createAttribute("width");W.nodeValue=X;var R=document.createAttribute("height");R.nodeValue=T;Q.setAttributeNode(W);Q.setAttributeNode(R);aa.drawImage(V,0,0,X,T);var U=Q.toDataURL("image/jpeg",Y);i.css("background-image","url('"+U+"')").append(e);var Z=v(U);L(Z,i,G);return}}else{var N=k(J);i.append(N).append("<div class='filename'>"+G.name+"</div>").append(e);var M=G;L(M,i,G);return}}}function v(G){var i=G.split(","),I=i[0].match(/:(.*?);/)[1],F=atob(i[1]),J=F.length,H=new Uint8Array(J);while(J--){H[J]=F.charCodeAt(J)}return new Blob([H],{type:I})}function c(F){var J=5381,I="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_-".split(""),G=F.length-1;if(typeof F=="string"){for(;G>-1;G--){J+=(J<<5)+F.charCodeAt(G)}}else{for(;G>-1;G--){J+=(J<<5)+F[G]}}var H=J&2147483647;var K="";do{K+=I[H&63]}while(H>>=6);return K}function k(i){if(["asp","php","js","java","html","css","sql"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><defs/><path fill="#FF8976" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#FFD0C8" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#FFF" d="M422 564l-118 46 118 47v37l-163-65v-37l163-65v37zm116-106h37l-89 240h-37l89-240zm64 200l118-47-118-46v-37l163 64v38l-163 64v-36z"/></svg>'}if(["psb","psd"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#8095FF" d="M168 32c-12 0-25 5-34 14s-14 22-14 34v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L648 32H168z"/><path fill="#CCD5FF" d="M920 304H696c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#C0CAFF" d="M504 550c5-2 10-4 16-4s11 2 16 4l185 108c5 2 8 8 8 13s-3 11-8 14L534 793c-4 2-10 4-16 4s-11-2-16-4L318 686c-5-3-8-8-8-14s3-11 8-14l186-108z"/><path fill="#FFF" d="M504 390c5-2 10-4 16-4s11 2 16 4l185 108c5 2 8 8 8 13s-3 11-8 14L534 633c-4 2-10 4-16 4s-11-2-16-4L318 526c-5-3-8-8-8-14s3-11 8-14l186-108z"/></svg>'}if(["xls","xlsx","number","et","ett"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#5ACC9B" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#BDEBD7" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#FFF" d="M475 538L366 386h76l71 108 74-108h73L549 538l117 161h-76l-79-115-78 116h-75l117-162z"/></svg>'}if(["wps","wpt","page","doc","docx"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#6CCBFF" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#C4EAFF" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#FFF" d="M280 386h65l65 244 72-244h62l72 244 66-244h62l-96 314h-65l-71-242h-1l-72 241h-65l-94-313z"/></svg>'}if(["ppt","pptx","key","dps","dpt","wpp"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#FF8976" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#FFD0C8" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#FFF" d="M386 386h176c70 0 92 47 92 97 0 48-28 97-92 97H446v120h-60V386zm60 145h96c35 0 53-10 53-47 0-38-25-48-48-48H446v95z"/></svg>'}if(i=="pdf"){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#FF5562" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#FFBBC0" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#FFF" d="M696 843c-50 0-95-86-119-142-40-17-84-32-127-43-37 25-100 62-149 62-31 0-52-15-60-42-7-21-1-36 5-44 13-18 40-27 80-27 32 0 72 6 118 17 30-21 59-45 86-70-12-56-25-147 8-188 16-20 40-27 70-18 33 10 45 30 49 45 13 54-49 128-91 171 9 38 21 77 36 113 61 27 133 67 141 111 3 15-1 30-13 42-11 8-22 13-34 13zm-74-121c30 61 59 90 74 90 2 0 6-1 10-5 6-5 6-9 5-13-3-16-29-42-89-72zm-296-83c-40 0-51 10-54 14-1 1-4 5-1 17 3 9 9 19 30 19 25 0 62-15 105-40-31-7-58-10-80-10zm158-5c26 8 52 16 77 26-9-23-16-47-23-70l-54 44zm99-258c-9 0-15 3-21 10-16 20-18 73-5 140 49-52 75-100 69-125-1-4-4-15-27-22l-16-3z"/></svg>'}if(i=="txt"){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#E5E5E5" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#CCC" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#FFF" d="M264 376h208c14 0 24-10 24-24s-10-24-24-24H264c-14 0-24 10-24 24s10 24 24 24zm0 160h496c14 0 24-10 24-24s-10-24-24-24H264c-14 0-24 10-24 24s10 24 24 24zm496 112H264c-14 0-24 10-24 24s10 24 24 24h496c14 0 24-10 24-24s-10-24-24-24z"/></svg>'}if(["zip","rar","gzip","7-zip","zipz","rarr","iso"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#5ACC9B" d="M944 944H80c-26 0-48-18-48-41V656h960v247c0 23-22 41-48 41z"/><path fill="#6CCBFF" d="M80 80h864c26 0 48 18 48 41v247H32V121c0-23 22-41 48-41z"/><path fill="#FFD766" d="M32 368h960v288H32z"/><path fill="#FF5562" d="M352 80h320v864H352z"/><path fill="#FFF" d="M444 128h64v48h-64zm64-48h64v48h-64zm0 96h64v48h-64zm-64 48h64v48h-64zm64 48h64v48h-64zm-64 48h64v48h-64zm64 48h64v48h-64zm-64 48h64v48h-64zm64 48h64v48h-64zm-64 48h64v48h-64zm64 48h64v48h-64zm-64 48h64v48h-64zm64 48h64v48h-64zm-64 48h64v48h-64zm64 48h64v48h-64zm-64 48h64v48h-64zm0 96h64v48h-64zm64-48h64v48h-64z"/></svg>'}if(["avi","wmv","mpeg","mp4","mov","mkv","flv","f4v","m4v","rmvb","rm","3gp","dat","ts","mts","vob"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#8095FF" d="M80 34h864v960H80z"/><path fill="#FFF" d="M136 112a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM136 272a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM136 432a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM136 592a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM136 752a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM136 912a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM824 112a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM824 272a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM824 432a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM824 592a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM824 752a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM824 912a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM648 508L436 362c-5-3-11-4-17 0-5 3-9 8-9 14v290c0 6 4 12 9 15 6 3 12 2 17-1l212-146c5-3 7-8 7-13s-3-10-7-13z"/></svg>'}if(["gif","jpg","jpeg","png","bmp"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><defs/><path fill="#FF5562" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#FFBBC0" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#FFF" d="M758 706L658 550c-3-4-8-7-13-7s-11 3-14 7l-53 84-120-195c-4-5-8-7-14-7s-10 3-14 7L266 706c-4 4-4 11 0 16 3 5 8 8 13 8h466c5 0 11-4 14-8 3-6 3-12-1-16zM622 412a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"/></svg>'}return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#E5E5E5" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#CCC" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/></svg>'}function q(){var i=[];r.children("li.success").each(function(){i.push(a(this).data("url"))});if(r.children("li").not(".add").length>=B.num&&B.num>1){A.hide()}else{A.show()}if(r.children("li").not(".add").length==0){r.addClass("empty")}b.val(i.join(","))}function z(i){i.fadeOut(333,function(){i.remove();q()});r.data("num",r.data("num")-1)}}})(jQuery);控件JS(原生的)
(function(a){a.fn.upload=function(D){var r=a(this),w="<li class='item'></li>",A=a('<li class="item add"><svg class="icon" viewBox="0 0 1024 1024" version="1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><style/></defs><path d="M737 436a174 174 0 0 1 172 172 172 172 0 0 1-172 172c-69 1-69 107 0 106 152-2 276-125 278-278S886 332 737 330c-69-1-69 105 0 106zM285 779a174 174 0 0 1-172-172 172 172 0 0 1 172-172c68-1 69-106 0-106A282 282 0 0 0 7 607a281 281 0 0 0 278 278c69 1 68-105 0-106z" fill="#4A5699"/><path d="M340 384a174 174 0 0 1 172-172 172 172 0 0 1 172 172c1 68 106 68 106 0a282 282 0 0 0-278-278 281 281 0 0 0-278 278c-1 68 105 68 106 0z" fill="#C45FA0"/><path d="M545 473c17 17 17 43 0 60L422 656a42 42 0 0 1-60-60l123-123c17-16 43-16 60 0z" fill="#F39A2B"/><path d="M485 473c17-16 44-16 60 0l123 123a42 42 0 0 1-60 60L485 533a42 42 0 0 1 0-60z" fill="#F39A2B"/><path d="M514 634c24 0 43 20 43 43v179a43 43 0 0 1-86 0V677c0-23 19-43 43-43z" fill="#E5594F"/></svg></li>'),e='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" class="progress"><g fill="rgba(17,89,164,0.1)"><path d="M 0 70 Q 75 39, 150 70 T 300 70 T 450 70 T 600 70 T 750 70 V 320 H 0 V 0"></path><animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-300" dur="1.5s" repeatCount="indefinite"></animateTransform></g><g fill="rgba(17,89,164,0.15)"><path d="M 0 70 Q 87.5 47, 175 70 T 350 70 T 525 70 T 700 70 T 875 70 T 1050 70 V 320 H 0 V 0"></path><animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-350" dur="3s" repeatCount="indefinite"></animateTransform></g></svg><div class="progressnum"></div>',g='<svg xmlns="http://www.w3.org/2000/svg" class="delete" version="1" viewBox="0 0 1024 1024"><path fill="#fff" d="M512 70a439 439 0 0 1 442 442 439 439 0 0 1-442 442A439 439 0 0 1 70 512 439 439 0 0 1 512 70m0-40a482 482 0 1 0 0 964 482 482 0 0 0 0-964zm114 253v-1c0-21-17-38-38-38H436c-21 0-38 17-38 38v1H282v74h460v-74H626zM321 396v346c0 21 17 38 38 38h306c21 0 38-17 38-38V396H321zm114 306h-76V474h76v228zm115 0h-76V474h76v228zm115 0h-76V474h76v228z"/></svg>',E='<svg xmlns="http://www.w3.org/2000/svg" class="look" version="1" viewBox="0 0 1024 1024"><path fill="#fff" d="M451 835a386 386 0 1 1 0-771 386 386 0 0 1 0 771zm0-675a291 291 0 1 0 0 581 291 291 0 0 0 0-581zm450 798c-15 0-30-5-42-17L658 740a58 58 0 0 1 83-82l201 201a58 58 0 0 1-41 99"/></svg>',d=a('<input type="file" name="file" />'),b=a('<input type="hidden" />'),j,u,t,o,n,m,y,B={height:r.attr("data-height")?r.attr("data-height"):0,width:r.attr("data-width")?r.attr("data-width"):1920,type:r.attr("data-type")?r.attr("data-type"):"png,jpg,jpeg,gif",upname:r.attr("data-file")?r.attr("data-file"):"file",inputname:r.attr("data-name")?r.attr("data-name"):"upload",num:r.attr("data-num")?r.attr("data-num"):10,action:r.attr("action")?r.attr("action"):"/index.php",size:r.attr("data-size")?r.attr("data-size"):20480,value:r.attr("data-value")?r.attr("data-value"):""};r.append(A.attr("data-num",B.num).attr("data-type",B.type)).append(d.attr("multiple",B.num>1?"multiple":false)).append(b.attr("name",B.inputname)).addClass(B.num>1?"multiple":"one").on("click","li.add",function(){d.click()}).on("change","input[type='file']",function(H){var G=H.target.files;var i=[];for(var F in G){if(typeof G[F]=="object"){i.push(G[F])}}C(i)}).on("click","li.error",function(i){z(a(i.currentTarget))}).on("click","svg.delete",function(i){z(a(i.currentTarget).parent("li.success"))}).on("click","svg.look",function(i){if(D&&typeof D=="function"){D(r,a(i.currentTarget).parent("li.success").data("url"))}}).on("mousedown","li.success",function(I){var i=a(I.target);j=a(this);var J=j.offset();var H=r.offset();var G=J.left;var F=J.top;u=parseInt(G)+(I.pageX-parseInt(G))+(H.left-J.left);t=parseInt(F)+(I.pageY-parseInt(F))+(H.top-J.top);m=j.width()+2+j.css("margin-right").replace("px","")*1;y=j.height()+2+j.css("margin-bottom").replace("px","")*1;o=false;n=false});if(B.value){var p=B.value.split(","),s=0,h="";var f=0;for(var x in p){if(s<B.num&&p[s]){h=a("<li class='item success'></li>").append(g).append(typeof D=="function"?E:"").data("url",p[s]).attr("data-filename",c(p[s])).css("background-image","url('"+p[s]+"')").insertBefore(A);r.data("num",++f).removeClass("empty");q()}s++}}else{r.data("num",0).addClass("empty")}a(document).on("mousemove",function(G){if(j){var F=G.pageX-u;var J=G.pageY-t;var I=j.index();var H=r.offset();var i=r.height()?r.height():134;j.css({top:J,left:F,zIndex:999,position:"absolute"});o=G.pageX-H.left;n=G.pageY-H.top;if(n>(i+20)||n<0){j.addClass("delete")}else{j.removeClass("delete")}o=parseInt(o/m);n=parseInt(n/y);o=parseInt(o+(r.width()/m)*n);if(o>=I){o++}r.children("li").not(j).css("margin-left",0);r.children("li").eq(o).not(j).css("margin-left",m)}}).on("mouseup",function(){if(j){if(j.hasClass("delete")&&j.data("filename")){z(j);j=false;r.children("li").not(".add").css({"position":"relative","top":0,"left":0,"margin-left":0,"zIndex":0});
r.children("li.add").css("margin-left",0);return false}var i=j.clone();i.data("url",j.data("url"));if(o!==false){if(o>=r.children("li").length){i.insertBefore(A)}else{i.insertBefore(r.children("li").eq(o))}j.remove();q();r.children("li").not(".add").css({"position":"relative","top":0,"left":0,"margin-left":0,"zIndex":0});r.children("li.add").css("margin-left",0)}}j=false}).on("dragenter",function(i){i.preventDefault()}).on("dragover",function(i){i.preventDefault();if(a(i.target).hasClass("upload")){r.addClass("dragenter")}else{r.removeClass("dragenter")}}).on("drop",function(H){H.preventDefault();r.removeClass("dragenter");var G=H.originalEvent.dataTransfer.files;var i=[];for(var F in G){if(typeof G[F]=="object"){i.push(G[F])}}C(i);return false});function C(H){var G=H;for(var F in G){if(typeof G[F]=="object"){var i=l(G[F],function(K,J,I){J.insertBefore(A);var L=new FormData();L.append(B.upname,K,I.name);r.removeClass("empty");a.ajax({url:B.action,type:"POST",data:L,dataType:"text",processData:false,contentType:false,success:function(M){M=JSON.parse(M);J.children("svg.progress").remove();J.children(".progressnum").remove();if(M.code){r.attr("data-value",M.msg);J.addClass("success").append(g).append(typeof D=="function"?E:"").data("url",M.msg)}else{J.addClass("error").attr("data-error",M.msg?M.msg:"服务端返回数据异常")}q()},xhr:function(){var M=new XMLHttpRequest();M.upload.addEventListener("progress",function(N){if(N.lengthComputable){var O=Math.round(N.loaded*100/N.total);J.children("svg.progress").css("height",50+(120*O/100)+"%");J.children(".progressnum").text(O)}},false);return M},error:function(){J.addClass("error").attr("data-error","上传失败,检查格式及文件大小！");q()}})})}}}function l(G,L){d.val("");if(B.num==1){r.children(".item").not(".add").remove()}else{if(B.num<=r.data("num")){return false}r.data("num",r.data("num")+1)}var F=G.size,J=G.name.toLowerCase().split(".").splice(-1).join(),i=a(w);var I=B.type.split(",");if(I.indexOf(J)<0){var K="不能上传."+J+"的文件!"}if(["png","jpg","jpeg","gif","bmp"].indexOf(J)<0&&F>B.size*1024){var K="不能上传大于."+B.size+"KB 的文件!"}if(K){i.append(k(J)).addClass("error").append("<div class='filename'>"+G.name+"</div>").attr("data-error",K).insertBefore(A);r.removeClass("empty");q();return false}var H=new FileReader();H.readAsDataURL(G);H.onload=function(){var P=c(G.name)+c(G.type)+c(G.size.toString())+c(H.result);if(r.children('li[data-filename="'+P+'"]').length>0){return false}i.attr("data-filename",P);if(["png","jpg","jpeg","gif","bmp"].indexOf(J)>=0){var O=new Image();O.src=H.result;O.onload=function(){var V=this;var X=V.width,T=V.height,S=X/T;if(B.width&&B.width<X){X=B.width;T=X/S}else{if(B.height&&T>B.height){T=B.height;X=T*S}}var Y=1;var Q=document.createElement("canvas");var aa=Q.getContext("2d");var W=document.createAttribute("width");W.nodeValue=X;var R=document.createAttribute("height");R.nodeValue=T;Q.setAttributeNode(W);Q.setAttributeNode(R);aa.drawImage(V,0,0,X,T);var U=Q.toDataURL("image/jpeg",Y);i.css("background-image","url('"+U+"')").append(e);var Z=v(U);L(Z,i,G);return}}else{var N=k(J);i.append(N).append("<div class='filename'>"+G.name+"</div>").append(e);var M=G;L(M,i,G);return}}}function v(G){var i=G.split(","),I=i[0].match(/:(.*?);/)[1],F=atob(i[1]),J=F.length,H=new Uint8Array(J);while(J--){H[J]=F.charCodeAt(J)}return new Blob([H],{type:I})}function c(F){var J=5381,I="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_-".split(""),G=F.length-1;if(typeof F=="string"){for(;G>-1;G--){J+=(J<<5)+F.charCodeAt(G)}}else{for(;G>-1;G--){J+=(J<<5)+F[G]}}var H=J&2147483647;var K="";do{K+=I[H&63]}while(H>>=6);return K}function k(i){if(["asp","php","js","java","html","css","sql"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><defs/><path fill="#FF8976" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#FFD0C8" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#FFF" d="M422 564l-118 46 118 47v37l-163-65v-37l163-65v37zm116-106h37l-89 240h-37l89-240zm64 200l118-47-118-46v-37l163 64v38l-163 64v-36z"/></svg>'}if(["psb","psd"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#8095FF" d="M168 32c-12 0-25 5-34 14s-14 22-14 34v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L648 32H168z"/><path fill="#CCD5FF" d="M920 304H696c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#C0CAFF" d="M504 550c5-2 10-4 16-4s11 2 16 4l185 108c5 2 8 8 8 13s-3 11-8 14L534 793c-4 2-10 4-16 4s-11-2-16-4L318 686c-5-3-8-8-8-14s3-11 8-14l186-108z"/><path fill="#FFF" d="M504 390c5-2 10-4 16-4s11 2 16 4l185 108c5 2 8 8 8 13s-3 11-8 14L534 633c-4 2-10 4-16 4s-11-2-16-4L318 526c-5-3-8-8-8-14s3-11 8-14l186-108z"/></svg>'}if(["xls","xlsx","number","et","ett"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#5ACC9B" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#BDEBD7" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#FFF" d="M475 538L366 386h76l71 108 74-108h73L549 538l117 161h-76l-79-115-78 116h-75l117-162z"/></svg>'
}if(["wps","wpt","page","doc","docx"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#6CCBFF" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#C4EAFF" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#FFF" d="M280 386h65l65 244 72-244h62l72 244 66-244h62l-96 314h-65l-71-242h-1l-72 241h-65l-94-313z"/></svg>'}if(["ppt","pptx","key","dps","dpt","wpp"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#FF8976" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#FFD0C8" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#FFF" d="M386 386h176c70 0 92 47 92 97 0 48-28 97-92 97H446v120h-60V386zm60 145h96c35 0 53-10 53-47 0-38-25-48-48-48H446v95z"/></svg>'}if(i=="pdf"){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#FF5562" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#FFBBC0" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#FFF" d="M696 843c-50 0-95-86-119-142-40-17-84-32-127-43-37 25-100 62-149 62-31 0-52-15-60-42-7-21-1-36 5-44 13-18 40-27 80-27 32 0 72 6 118 17 30-21 59-45 86-70-12-56-25-147 8-188 16-20 40-27 70-18 33 10 45 30 49 45 13 54-49 128-91 171 9 38 21 77 36 113 61 27 133 67 141 111 3 15-1 30-13 42-11 8-22 13-34 13zm-74-121c30 61 59 90 74 90 2 0 6-1 10-5 6-5 6-9 5-13-3-16-29-42-89-72zm-296-83c-40 0-51 10-54 14-1 1-4 5-1 17 3 9 9 19 30 19 25 0 62-15 105-40-31-7-58-10-80-10zm158-5c26 8 52 16 77 26-9-23-16-47-23-70l-54 44zm99-258c-9 0-15 3-21 10-16 20-18 73-5 140 49-52 75-100 69-125-1-4-4-15-27-22l-16-3z"/></svg>'}if(i=="txt"){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#E5E5E5" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#CCC" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#FFF" d="M264 376h208c14 0 24-10 24-24s-10-24-24-24H264c-14 0-24 10-24 24s10 24 24 24zm0 160h496c14 0 24-10 24-24s-10-24-24-24H264c-14 0-24 10-24 24s10 24 24 24zm496 112H264c-14 0-24 10-24 24s10 24 24 24h496c14 0 24-10 24-24s-10-24-24-24z"/></svg>'}if(["zip","rar","gzip","7-zip","zipz","rarr","iso"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#5ACC9B" d="M944 944H80c-26 0-48-18-48-41V656h960v247c0 23-22 41-48 41z"/><path fill="#6CCBFF" d="M80 80h864c26 0 48 18 48 41v247H32V121c0-23 22-41 48-41z"/><path fill="#FFD766" d="M32 368h960v288H32z"/><path fill="#FF5562" d="M352 80h320v864H352z"/><path fill="#FFF" d="M444 128h64v48h-64zm64-48h64v48h-64zm0 96h64v48h-64zm-64 48h64v48h-64zm64 48h64v48h-64zm-64 48h64v48h-64zm64 48h64v48h-64zm-64 48h64v48h-64zm64 48h64v48h-64zm-64 48h64v48h-64zm64 48h64v48h-64zm-64 48h64v48h-64zm64 48h64v48h-64zm-64 48h64v48h-64zm64 48h64v48h-64zm-64 48h64v48h-64zm0 96h64v48h-64zm64-48h64v48h-64z"/></svg>'}if(["avi","wmv","mpeg","mp4","mov","mkv","flv","f4v","m4v","rmvb","rm","3gp","dat","ts","mts","vob"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#8095FF" d="M80 34h864v960H80z"/><path fill="#FFF" d="M136 112a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM136 272a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM136 432a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM136 592a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM136 752a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM136 912a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM824 112a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM824 272a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM824 432a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM824 592a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM824 752a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM824 912a40 40 0 1 0 80 0 40 40 0 1 0-80 0zM648 508L436 362c-5-3-11-4-17 0-5 3-9 8-9 14v290c0 6 4 12 9 15 6 3 12 2 17-1l212-146c5-3 7-8 7-13s-3-10-7-13z"/></svg>'}if(["gif","jpg","jpeg","png","bmp"].indexOf(i)>=0){return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><defs/><path fill="#FF5562" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#FFBBC0" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/><path fill="#FFF" d="M758 706L658 550c-3-4-8-7-13-7s-11 3-14 7l-53 84-120-195c-4-5-8-7-14-7s-10 3-14 7L266 706c-4 4-4 11 0 16 3 5 8 8 13 8h466c5 0 11-4 14-8 3-6 3-12-1-16zM622 412a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"/></svg>'}return'<svg xmlns="http://www.w3.org/2000/svg" class="icon" version="1" viewBox="0 0 1024 1024"><path fill="#E5E5E5" d="M160 32a49 49 0 0 0-48 48v864c0 12 5 25 14 34 10 9 22 14 34 14h704c12 0 25-5 34-14 9-10 14-22 14-34V304L640 32H160z"/><path fill="#CCC" d="M912 304H688c-12 0-25-5-34-14s-14-22-14-34V32l272 272z"/></svg>'
}function q(){var i=[];r.children("li.success").each(function(){i.push(a(this).data("url"))});if(r.children("li").not(".add").length>=B.num&&B.num>1){A.hide()}else{A.show()}if(r.children("li").not(".add").length==0){r.addClass("empty")}b.val(i.join(","))}function z(i){i.fadeOut(333,function(){i.remove();q()});r.data("num",r.data("num")-1)}}})(jQuery);控件CSS
upload.css
.upload,.upload li{margin:0;padding:0;list-style-type: none}.upload{border:1px solid #d7d7d7;padding:15px 5px 5px 15px;zoom:1;position:relative;width:100%;}.upload:after{display:block;clear:both;content:"";visibility:hidden;height:0}.upload .item{width:150px;height:120px;float:left;margin:0 10px 10px 0;background:#f8f8f8;position:relative;border-radius:4px;background-size:contain;background-position:center center;background-repeat:no-repeat;border:1px solid #d7d7d7;overflow:hidden}.upload .item .filename{font-size:12px;width:90%;left:5%;position:absolute;top:70%;line-height:1.3em;height:2.6em;overflow:hidden;text-align:center}.upload .item.error{border-color:#f20}.upload .item.error::after{content:"";background:rgba(255,255,255,.8);position:absolute;width:100%;height:100%;z-index:9;display:block;line-height:100%;text-align:center}.upload .item.error::before{content:attr(data-error);position:absolute;padding:10px;z-index:10;display:block;font-size:12px;color:#f20;top:0}.upload .item svg.icon{position:absolute;height:40%;top:20%;left:0;width:100%}.upload .item svg.progress{position:absolute;bottom:0;width:100%;height:50%}.upload .item .progressnum{width:40px;height:40px;border-radius:40px;text-align:center;line-height:40px;font-size:12px;color:#fff;position:absolute;left:50%;margin-left:-20px;top:50%;margin-top:-20px;background:rgba(17,89,164,0.5)}.upload .item.add svg{top:30%}.upload .item.success::after{position:absolute;background:rgba(0,0,0,.6);content:"";left:0;right:0;top:0;bottom:0;opacity:0;transition:all .3s}.upload .item.success:hover::after{opacity:1}.upload .item.success svg.delete,.upload .item.success svg.look{position:absolute;height:30px;top:50%;margin-top:-15px;left:50%;color:#fff;z-index:10;transition:all .3s;cursor:pointer}.upload .item.success svg.delete{margin-left:-35px;height:26px;margin-top:-14px;left:-30px}.upload .item.success svg.look{margin-left:10px;left:105%}.upload .item.success:hover svg.delete{margin-left:-35px;left:50%;height:26px;margin-top:-14px;transition:all .3s}.upload .item.success:hover svg.look{margin-left:10px;left:50%;transition:all .3s}.upload .item.delete{opacity:.2;transition:all .3s}.upload input[type='file']{display:none}.upload.multiple.empty{height:160px;width:100%}.upload.multiple.empty .add{width:100%;position:absolute;top:50%;margin-top:-30px;height:36px;background:0;border:0;left:0;overflow:inherit}.upload.multiple.empty .add::after{content:"点击上传文件";width:180px;position:absolute;height:36px;background:#0e90d2;left:50%;margin-left:-90px;display:block;z-index:9;visibility:visible;text-align:center;color:#fff;line-height:36px;font-size:14px;border:0 none;border-radius:0}.upload.multiple.empty .add:hover::after{background-color:#0a70c2}.upload.multiple.empty .add svg{display:none}.upload.multiple.empty .add::before{content:"或者将文件拖到此处,最多可以上传 "attr(data-num) " 个" attr(data-type) "格式文件";width:100%;text-align:center;position:absolute;bottom:-30px;font-size:12px;margin-top:14px;left:0;color:#999;white-space:nowrap}.upload.one{width:150px;height:150px;padding:0}.upload.one li{height:100%;width:100%;margin:0;padding:0}.upload.one li.add svg{opacity:0;transition:all .3s;margin-top:-30px}.upload.one li.add:hover svg{opacity:1;transition:all .3s}.upload.one.empty li.add svg{opacity:1;transition:all .3s}.upload.one .item{border:0 none;border-radius:0}.upload.one .add{position:absolute;top:30px;right:0;left:0;background:0}.upload.one .item.success svg.delete,.upload.one .item.success svg.look{top:0;margin-top:5px}.upload.one .item.success svg.look{margin-top:3px}.upload.dragenter{border:2px dashed #d7d7d7;box-shadow:0 1px 5px rgba(0,0,0,.7);display:table}.upload.dragenter::after{content:"";background:rgba(255,255,255,.9);z-index:998;position:absolute;left:0;top:0;height:100%;width:100%;vertical-align:middle;display:table-cell;visibility:visible}.upload.dragenter::before{content:"将文件拖到这里上传";position:absolute;width:100%;top:50%;z-index:999;width:100%;text-align:center;margin-top:-12px;color:#999}
5049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
