PHP前端开发

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

百变鹏仔 1个月前 (11-16) #layui
文章标签 组件

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

在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&gt;0){ $("#uploadbtn").show(); }obj.preview(function(index,file,result){$("#chooseFile").siblings("span").append("<div>"+file.name+"  <span>×</span></div>") if(index&gt;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&gt;0){$("#uploadbtn").hide();} }

更多layui知识请关注PHP中文网layui使用教程栏目。