layui的upload组件使用和上传阻止
背景:页面上一个按钮,点击弹出上传框,从按钮的方法代码开始写:处理未选择文件阻止上传;通过判断选择文件的数量,显示或隐藏上传按钮;
在js中定义:
function uploadFile(){layer.open({type:1,title:'上传文件‘,area:['25%','400px'],content:'<div><div><input><span></span></div></div><div><div><input><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>"+file.name+" <span>×</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();} }
更多layui知识请关注PHP中文网layui使用教程栏目。