Layui's upload component usage and upload blocking-Layui Tutorial-php.cn

Layui's upload component usage and upload blocking

尚

Release： 2020-01-11 16:55:42

forward

5705 people have browsed it

Layui's upload component usage and upload blocking

Background: There is a button on the page. Click to pop up the upload box. Start writing the method code of the button: handle unselected files to prevent uploading; display or hide uploads by judging the number of selected files. Button;

is defined in js:

function  uploadFile(){
　　　　layer.open({
　　　　　　　　type:1,
　　　　　　　　title:&#39;上传文件‘,
　　　　　　　　area:[&#39;25%&#39;,&#39;400px&#39;],
　　　　　　　　content:&#39;<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:[&#39;关闭&#39;],
　　　　btn1:function(idx,ele){
　　　　　　　　layer.closeAll();
　　　　　　}
　　})
createUpload();
}
 
var  files ;
function createUpload(){
　　　　　　$("#uploadbtn").hide();
　　　　　　$("#chooseFile").next().next("span").text("");
　　　　　　layui.use([&#39;upload&#39;],function(){
　　　　　　　　var uploadInst = upload.render({
　　　　　　　　　　　　elem:&#39;#chooseFile&#39;,
　　　　　　　　　　　　　url:&#39; &#39;,
　　　　　　　　　　　　　　accept:&#39;file&#39;,
　　　　　　　　　　　　　auto:false,
　　　　　　　　　　　　multiple:true,
　　　　　　　　　　acceptMime:&#39;application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet&#39;,
　　　　　　　　　　exts:&#39;xls|xlsx&#39;,
　　　　　　　　　　size:1024000,
　　　　　　　　　　number:5,
　　　　　　　　　　bindAction:&#39;#uploadbtn&#39;,
　　　　　　　　　　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=&#39;"+index+"&#39;>"+file.name+"  <span onclick=&#39;deletefile(\""+index+"\")&#39;>&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();
　　}
 
}

Copy after login

For more layui knowledge, please pay attention to the layui usage tutorial column on the PHP Chinese website.

The above is the detailed content of Layui's upload component usage and upload blocking. For more information, please follow other related articles on the PHP Chinese website!