layui的upload组件使用和上传阻止

Posted 2021-03-16 mo3408

页面上一个按钮，点击弹出上传框，从按钮的方法代码开始写：处理未选择文件阻止上传；通过判断选择文件的数量，显示或隐藏上传按钮；

在js中定义：

  1 function  uploadFile(){
  2 
  3 　　　　layer.open({
  4 
  5 　　　　　　　　type:1,
  6 
  7 　　　　　　　　title:‘上传文件‘,
  8 
  9 　　　　　　　　area:[‘25%‘,‘400px‘],
 10 
 11 　　　　　　　　content:‘<div class="layui-form-item" style="margin-top:40px;"> 12 
 13 　　　　　　　　　　<div class="layui-input-block"> 14 
 15 　　　　　　　　　　　　<input class="layui-btn" type="button" id="chooseFIle" value="选择文件"> 16 
 17 　　　　　　　　　　　　<span></span> 18 
 19 　　　　　　　　　　</div> 20 
 21 　　　　　　　　</div> 22 
 23 　　　　　　　　　　<div class="layui-form-item" style="margin-top:40px;"> 24 
 25 　　　　　　　　　　<div class="layui-input-block"> 26 
 27 　　　　　　　　　　　　<input class="layui-btn" type="button" id="uploadbtn" value="上传"> 28 
 29 　　　　　　　　　　　　<span></span> 30 
 31 　　　　　　　　　　</div> 32 
 33 　　　　　　　　</div>‘，
 34 
 35 　　　　btn:[‘关闭‘],
 36 
 37 　　　　btn1:function(idx,ele){
 38 
 39 　　　　　　　　layer.closeAll();
 40 
 41 　　　　　　}
 42 
 43 　　})
 44 
 45 createUpload();
 46 
 47 }
 48 
 49   
 50 
 51 var  files ;
 52 
 53 function createUpload(){
 54 
 55 　　　　　　$("#uploadbtn").hide();
 56 
 57 　　　　　　$("#chooseFile").next().next("span").text("");
 58 
 59 　　　　　　layui.use([‘upload‘],function(){
 60 
 61 　　　　　　　　var uploadInst = upload.render({
 62 
 63 　　　　　　　　　　　　elem:‘#chooseFile‘,
 64 
 65 　　　　　　　　　　　　　url:‘ ‘,
 66 
 67 　　　　　　　　　　　　　　accept:‘file‘,
 68 
 69 　　　　　　　　　　　　　auto:false,
 70 
 71 　　　　　　　　　　　　multiple:true,
 72 
 73 　　　　　　　　　　acceptMime:‘application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet‘,
 74 
 75 　　　　　　　　　　exts:‘xls|xlsx‘,
 76 
 77 　　　　　　　　　　size:1024000,
 78 
 79 　　　　　　　　　　number:5,
 80 
 81 　　　　　　　　　　bindAction:‘#uploadbtn‘,
 82 
 83 　　　　　　　　　　choose:function(obj){
 84 
 85 　　　　　　　　　　　　files = this.files = boj.pushFile();
 86 
 87 　　　　　　　　　　　　if(Object.keys(files).length>0){ $("#uploadbtn").show(); }
 88 
 89 　　　　　　　　　　　　obj.preview(function(index,file,result){
 90 
 91 　　　　　　　　　　　　　　$("#chooseFile").siblings("span").append("<div title=‘"+index+"‘>"+file.name+"&nbsp;&nbsp;<span onclick=‘deletefile(""+index+"")‘>&times;</span></div>")
 92 
 93 　　　　　　　　　　　　　　　if(index>0) {$("#uploadbtn").show() ;}
 94 
 95 　　　　　　　　　　　　　　})
 96 
 97 　　　　　　　　　　},
 98 
 99 　　　　　　　　allDone:function(obj){  
100 
101 　　　　　　　　　　　　if(obj.successful){
102 
103 　　　　　　　　　　　　　　layer.msg(obj.total+"个文件上传成功!");
104 
105 　　　　　　　　　　　　}
106 
107 　　　　　　　　  },
108 
109 　　　　　　　　error:function(){
110 
111 　　　　　　　　　　layer.alert("上传成功!");
112 
113 　　　　　　　　}
114 
115 　　　　})
116 
117 　　}
118 
119 }
120 
121 function  deletefile(index){
122 
123 　　delete  files[index];
124 
125 　　$("#chooseFile").siblings("span").find("div[title="+index+"]").remove();
126 
127 　　if(!Object.keys(files).length>0){
128 
129 　　　　　　$("#uploadbtn").hide();
130 
131 　　}
132 
133   
134 
135 }