码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-01-11 23:47:58      阅读:379      评论:0      收藏:0      [点我收藏+]

标签:code   layui   按钮   rev   hid   ica   上传   open   name   

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

在js中定义:

  1 function  uploadFile(){
  2 
  3     layer.open({
  4 
  5         type:1,
  6 
  7         title:‘上传文件‘,
  8 
  9         area:[‘25%‘,‘400px‘],
 10 
 11         content:‘<div class="layui-form-item" style="margin-top:40px;"> 12 
 13           <div class="layui-input-block"> 14 
 15             <input class="layui-btn" type="button" id="chooseFIle" value="选择文件"> 16 
 17             <span></span> 18 
 19           </div> 20 
 21         </div> 22 
 23           <div class="layui-form-item" style="margin-top:40px;"> 24 
 25           <div class="layui-input-block"> 26 
 27             <input class="layui-btn" type="button" id="uploadbtn" value="上传"> 28 
 29             <span></span> 30 
 31           </div> 32 
 33         </div>‘,
 34 
 35     btn:[‘关闭‘],
 36 
 37     btn1:function(idx,ele){
 38 
 39         layer.closeAll();
 40 
 41       }
 42 
 43   })
 44 
 45 createUpload();
 46 
 47 }
 48 
 49   
 50 
 51 var  files ;
 52 
 53 function createUpload(){
 54 
 55       $("#uploadbtn").hide();
 56 
 57       $("#chooseFile").next().next("span").text("");
 58 
 59       layui.use([‘upload‘],function(){
 60 
 61         var uploadInst = upload.render({
 62 
 63             elem:‘#chooseFile‘,
 64 
 65              url:‘ ‘,
 66 
 67               accept:‘file‘,
 68 
 69              auto:false,
 70 
 71             multiple:true,
 72 
 73           acceptMime:‘application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet‘,
 74 
 75           exts:‘xls|xlsx‘,
 76 
 77           size:1024000,
 78 
 79           number:5,
 80 
 81           bindAction:‘#uploadbtn‘,
 82 
 83           choose:function(obj){
 84 
 85             files = this.files = boj.pushFile();
 86 
 87             if(Object.keys(files).length>0){ $("#uploadbtn").show(); }
 88 
 89             obj.preview(function(index,file,result){
 90 
 91               $("#chooseFile").siblings("span").append("<div title=‘"+index+"‘>"+file.name+"&nbsp;&nbsp;<span onclick=‘deletefile(\""+index+"\")‘>&times;</span></div>")
 92 
 93                if(index>0) {$("#uploadbtn").show() ;}
 94 
 95               })
 96 
 97           },
 98 
 99         allDone:function(obj){  
100 
101             if(obj.successful){
102 
103               layer.msg(obj.total+"个文件上传成功!");
104 
105             }
106 
107           },
108 
109         error:function(){
110 
111           layer.alert("上传成功!");
112 
113         }
114 
115     })
116 
117   }
118 
119 }
120 
121 function  deletefile(index){
122 
123   delete  files[index];
124 
125   $("#chooseFile").siblings("span").find("div[title="+index+"]").remove();
126 
127   if(!Object.keys(files).length>0){
128 
129       $("#uploadbtn").hide();
130 
131   }
132 
133   
134 
135 }

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

标签:code   layui   按钮   rev   hid   ica   上传   open   name   

原文地址:https://www.cnblogs.com/mo3408/p/12181466.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!