layui upload阻止文件上传问题，及多选文件上传

Start2019

已于 2023-02-17 13:51:35 修改

阅读量3.9k

点赞数 1

分类专栏： jq项目问题文章标签： layui 前端 javascript

于 2022-07-04 15:46:42 首次发布

原文链接：https://blog.csdn.net/qq_43338182/article/details/111478674

版权

jq项目问题专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1、效果展示：

2、需求：

下拉框及月份都为不空，且有文件数据才能提交上传。

3、环境：

目前项目中引用的 layui 版本是 2.4.5。在 before 中进行判断，使用 return false 想要阻止文件上传没反应，文件仍然会被提交上去。

4、解决方法：

去翻了一下日志，这个 bug 在 v2.6.7 版本才被修复，因此有两种方式：

1. 方法一：下载 layuiv2.6.8，替换 upload.js；

2. 方法二：修改源代码：

【参考：layui upload 阻止上传_Im灬大神的博客-CSDN博客_layui upload阻止上传】：

（1）找到 upload.js

（2）打开 “自动换行”，搜索： “ "choose" ”；修改下面画红框部分：

即：将原来的：

y=function(){if("choose"!==t&&!l.auto||(l.choose&&l.choose(g),"choose"!==t))return l.before&&l.before(g),a.ie?a.ie>9?u():c():void u()};

改成下面的：

y=function(){if("choose"!==t&&!l.auto||(l.choose&&l.choose(g),"choose"!==t))return (l.before&&l.before(g))===false?"":a.ie?a.ie>9?u():c():void u()};

5、upload 使用：

<!-- 选择文件 -->
<div class="layui-form-item">
  <div class="layui-inline">
      <label class="layui-form-label"><em class="must">*</em>文件上传:</label>
      <div class="layui-input-inline">          
          <button type="button" class="st-btn" id="testList" style="width: 100px;"><i class="st-icon">&#xe612;</i>&nbsp;&nbsp;选择文件</button>
          <div class="lead-file mrb20">
            <p style="color: #999;">支持拓展名： .xls .xlsx</p>
          </div>
      </div>
  </div>
</div>

<!-- 显示文件 -->
<div class="layui-upload-list" style="max-width: 1000px;">
  <table class="layui-table">
    <colgroup>
      <col>
      <col width="150">
      <col width="260">
      <col width="150">
    </colgroup>
    <thead>
      <tr><th>文件名</th>
      <th>大小</th>
      <th>上传进度</th>
      <th>操作</th>
    </tr></thead>
    <tbody id="demoList"></tbody>
  </table>
</div>

<!-- 文件上传 -->
<div class="layui-form-item" style="padding:20px 0 140px;">
  <div class="layui-input-block">
    <button type="button" class="st-btn-normal mrr20" id="lead">上传</button>
    <button class="st-btn-normal st-btn-cancel" onclick="javascript:window.history.back(); return false;">返回</button>
  </div>
</div>

注意：提交按钮（这里是 “上传”）最好添加一个 “ type="button" ”，否则点击按钮，表单会自动提交（整个页面也会刷新）。

下面这部分代码是在 layui 示例中复制过来的，具体可以去官网上看一下案例。

var uploadListIns = upload.render({
  elem: '#testList'
  ,elemList: $('#demoList') //列表元素对象
  ,url: '' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
  ,data: {
    yearMon: function(){ return $("#yearMonth").val(); },
    groupId: function(){ return $("#groupId option:selected").val(); }
  }
  ,accept: 'file'
  ,multiple: true
  ,exts: "xls|xlsx|XLS|XLSX"
  ,auto: false
  ,bindAction: '#lead'
  ,before: function(obj){
    console.log("上传之前",Object.keys(this.files).length)
    if($("#groupId option:selected").val()=='' || $("#yearMonth").val()=="" || Object.keys(this.files).length==0){
      layer.confirm('请将数据补充完整', {icon: 0});
      return false;
    } else {
      layer.open({
        type: 1,
        title: false,
        skin: 'upload-tip',
        area: ['416px', '228px'],
        closeBtn: 0,
        shadeClose: false,
        content: '<div class="tip-content"><p class="tip-top"></p><p>文件解析中，请勿关闭页面！</p><img src="../../common/plugins/layui/css/modules/layer/default/loading-0.gif"/></div>'
      });
    }
  }
  ,choose: function(obj){   
    var that = this;
    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/1014).toFixed(1) +'kb</td>'
        ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></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 值，以免删除后出现同名文件不可选
      });
      
      that.elemList.append(tr);
      element.render('progress'); //渲染新加的进度条组件
    });
  }
  ,done: function(res, index, upload){ //成功的回调
    layer.closeAll();
    var that = this;
    if(res.code == dataStatusCode){ //上传成功
      var tr = that.elemList.find('tr#upload-'+ index)
      ,tds = tr.children();
      tds.eq(3).html(''); //清空操作
      delete this.files[index]; //删除文件队列已经上传成功的文件
      successAlert("文件上传成功！");
      return;
    } else if(res.code == invaildCode){
      window.location.href = '../../login.html';
    } else {
      this.error(index, upload);
    }
  }
  ,allDone: function(obj){ //多文件上传完毕后的状态回调
    console.log("多文件上传完毕后",obj)
    // if(obj.successful){
    //   layer.msg(obj.total+"个文件上传成功！")
    // }
  }
  ,error: function(index, upload){ //错误回调
    layer.closeAll();
    layer.msg("上传失败，请联系管理员！",{icon: 2});
    var that = this;
    var tr = that.elemList.find('tr#upload-'+ index)
    ,tds = tr.children();
    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
  }
  ,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
    element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
  }
});

//选择文件判断
$("#lead").click(function(){
  if($("#groupId option:selected").val()=='' || $("#yearMonth").val()==""){
    console.log(1)
    layer.confirm('请将数据补充完整', {icon: 0});
    return false;
  }
})