站长资讯网
最全最丰富的资讯网站

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

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

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

在js中定义:

function  uploadFile(){     layer.open({         type:1,         title:'上传文件‘,         area:['25%','400px'],         content:'<div class="layui-form-item" style="margin-top:40px;">           <div class="layui-input-block">             <input class="layui-btn" type="button" id="chooseFIle" value="选择文件">             <span></span>           </div>         </div>           <div class="layui-form-item" style="margin-top:40px;">           <div class="layui-input-block">             <input class="layui-btn" type="button" id="uploadbtn" value="上传">             <span></span>           </div>         </div>‘,     btn:['关闭'],     btn1:function(idx,ele){         layer.closeAll();       }   }) createUpload(); }   var  files ; function createUpload(){       $("#uploadbtn").hide();       $("#chooseFile").next().next("span").text("");       layui.use(['upload'],function(){         var uploadInst = upload.render({             elem:'#chooseFile',              url:' ',               accept:'file',              auto:false,             multiple:true,           acceptMime:'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',           exts:'xls|xlsx',           size:1024000,           number:5,           bindAction:'#uploadbtn',           choose:function(obj){             files = this.files = boj.pushFile();             if(Object.keys(files).length>0){ $("#uploadbtn").show(); }             obj.preview(function(index,file,result){               $("#chooseFile").siblings("span").append("<div title='"+index+"'>"+file.name+"&nbsp;&nbsp;<span onclick='deletefile(""+index+"")'>&times;</span></div>")                if(index>0) {$("#uploadbtn").show() ;}               })           },         allDone:function(obj){               if(obj.successful){               layer.msg(obj.total+"个文件上传成功!");             }           },         error:function(){           layer.alert("上传成功!");         }     })   } } function  deletefile(index){   delete  files[index];   $("#chooseFile").siblings("span").find("div[title="+index+"]").remove();   if(!Object.keys(files).length>0){       $("#uploadbtn").hide();   }   }

赞(0)
分享到: 更多 (0)