layui使用upload组件实现文件上传功能

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

上海ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!

在js中定义:

function  uploadFile(){
    layer.open({
        type:1,
        title:'上传文件‘,
        area:['25%','400px'],
        content:'
\           
\             \             \           
\         
\           
\           
\             \             \           
\         
‘,     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("
"+file.name+"  ×
")                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组件使用和上传阻止的详细内容,更多请关注创新互联其它相关文章!


文章标题:layui使用upload组件实现文件上传功能
转载来源:http://hbruida.cn/article/ggpddj.html