欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

layui-upload上传组件拦截

程序员文章站 2022-04-08 09:26:46
...

layui.upload判断并阻止文件上传
在upload.js,搜索y=function,注释掉该function大括号内的语句并替换成:

if ("choose" !== i && !l.auto || (l.choose && l.choose(g), "choose" !== i)) return (l.before && l.before(g))===false?'':o.ie ? o.ie > 9 ? u() : c() : void u()
<div id="files">
          <div class="layui-upload">
              <button type="button" class="layui-btn layui-btn-normal" id="testList">
                  选择文件
              </button>
              <div class="layui-upload-list">
                  <table class="layui-table">
                      <thead>
                        <tr>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                      </thead>
                      <tbody id="demoList"></tbody>
                  </table>
              </div>
          </div>
      </div>
layui.use('upload',function(){
            var upload = layui.upload
            var demoListView = $('#demoList')
            ,uploadListIns = upload.render({
              elem: '#testList'
            ,url: '/demand/file'
            ,accept: 'file'
            ,exts: 'docx|pdf' //只允许上docx/pdf
            ,multiple: true      //多文件上传
            ,auto: false
            ,bindAction: '#testListAction'
            ,choose: function(obj){
              var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
              //预读本地文件,如果是多文件,则会遍历
              obj.preview(function(index, file, result){
                var tr = $(['<tr id="upload-'+ index +'">'
                  ,'<td>'+ file.name +'</td>'
                  ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                  ,'<td>等待上传</td>'
                  ,'<td>'
                    // ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                  ,'</td>'
                ,'</tr>'].join(''));

                //单个重传
                // tr.find('.demo-reload').on('click', function(){
                //   obj.upload(index, file);
                // });

                //删除
                tr.find('.demo-delete').on('click', function(){
                  delete files[index]; //删除对应的文件
                  tr.remove();
                  uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
                });

                demoListView.append(tr);
              });
            }
            ,before:function(obj){
                 // layer.load()
                 var wikiurl = $('input[name="wiki_url"]').val()
                 this.data = {'wiUrl':wikiurl}
                 if(wikiurl){
                    return true
                 }else {
                     layer.msg("请输入父页面链接"); //值为空时,提醒用户输入对应的值
                     return false;  //通过wikiurl判断值是否为空,如果为空,则返回false,拦截上传文件
                 //这里需要重写load.js源文件,否则return false无效
                 //在upload.js,搜索y=function,注释掉该function大括号内的语句并替换成:
                 //if ("choose" !== i && !l.auto || (l.choose && l.choose(g), "choose" !== i)) return (l.before && l.before(g))===false?'':o.ie ? o.ie > 9 ? u() : c() : void u()
                 }
                    }
            ,done: function(res, index, upload){
                 console.log('res:',res)
                var tr = demoListView.find('tr#upload-'+ index)
                ,tds = tr.children();
              if(res.res === 'success'){ //上传成功
                tds.eq(2).html('<span style="color: #5FB878;">写入成功</span>');
                tds.eq(3).html(''); //清空操作
                layer.msg("Wiki写入成功")
                var fileurl = res['url']
                var htmlid = res['htmlid']
                $('#showurl').append("<span style='color: red'>Wiki目标地址:</span><a id='"+htmlid+"' href='"+fileurl+"' target='_blank'>"+fileurl+"</a><button style='margin-left: 20px' class='btn layui-btn layui-btn-radius layui-btn-xs' data-clipboard-target='#"+htmlid+"'>复制链接</button><br/>")

                var clipboard = new ClipboardJS('.btn'); //剪贴板
                clipboard.on('success', function(e) {
                            // console.log(e);
                        });
                clipboard.on('error', function(e) {
                            // console.log(e);
                        });

                return delete this.files[index]  //删除文件队列已经上传成功的文件
              }else if(res.res === 400){
                  tds.eq(2).html('<span style="color: #5FB878;">页面已存在</span>')
                  tds.eq(3).html(''); //清空操作
                  layer.msg("wiki页面已存在")
                  return delete this.files[index]
              }else if(res.res === 401){
                  layer.msg("无法获取父页面信息")
                  return delete this.files[index]
              }else if(res.res === 404){
                  layer.msg("父页面未找到")
                  return delete this.files[index]
              }else if(res.res === 500){
                  tds.eq(2).html('<span style="color: #5FB878;">文件类型错误</span>')
                  tds.eq(3).html(''); //清空操作
                  layer.msg("文件类型不符合要求")
                  return delete this.files[index]
              }else if(res.res === 501){
                  tds.eq(2).html('<span style="color: #FF5722;">文件类型错误</span>')
                  tds.eq(3).html(''); //清空操作
                  layer.msg("PDF文件读取内容为空")
                  return delete this.files[index]
              }
              this.error(index, upload);
            }
            ,error: function(index, upload){
              var tr = demoListView.find('tr#upload-'+ index)
              ,tds = tr.children();
              tds.eq(2).html('<span style="color: #FF5722;">写入失败</span>');
              // tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
          });
        })
相关标签: JS