背景:页面上一个按钮,点击弹出上传框,从按钮的方法代码开始写:处理未选择文件阻止上传;通过判断选择文件的数量,显示或隐藏上传按钮;
在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+" <span onclick='deletefile(\""+index+"\")'>×</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使用教程栏目。
Atas ialah kandungan terperinci layui的upload组件使用和上传阻止. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!