layui的upload组件使用以及上传阻止测试

标签：cti   on()   push   xlsx   pre   multi   lld   block   remove   

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

在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();

　　}

}

layui的upload组件使用以及上传阻止测试

标签：cti   on()   push   xlsx   pre   multi   lld   block   remove   

原文地址：https://www.cnblogs.com/sdlzspl/p/9590377.html