layui-upload上传组件拦截

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'); //显示重传
            }
          });
        })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值