layui.upload.render清空已选择的文件队列

要清空已选择的文件队列，可以在 layui.upload.render(options) 方法中传入一个元素选择器，然后使用该元素的 val() 方法将其值设为空字符串即可。例如：

layui.upload.render({
  elem: '#upload',
  url: '/upload/',
  accept: 'file',
  multiple: true,
  choose: function(obj){
    // 清空已选择的文件队列
    $('#upload').val('');
    // ...
  },
  done: function(res){
    // ...
  },
  error: function(){
    // ...
  }
});

在 choose 回调函数中，先通过 $('#upload') 获取上传组件的 DOM 元素，然后调用 val('') 方法将其值设为空字符串，即可清空已选择的文件队列。

相关问题

layui.upload.render清空每次选择的文件队列

如果你想每次选择文件时都清空之前选择的文件队列，可以在 choose 回调函数中再次清空文件队列。例如：

layui.upload.render({
  elem: '#upload',
  url: '/upload/',
  accept: 'file',
  multiple: true,
  choose: function(obj){
    // 清空已选择的文件队列
    $('#upload').val('');
    // 再次绑定清空事件
    $('#upload').on('change', function(){
      $('#upload').val('');
    });
    // ...
  },
  done: function(res){
    // ...
  },
  error: function(){
    // ...
  }
});

在 choose 回调函数中，先通过 $('#upload') 获取上传组件的 DOM 元素，然后调用 val('') 方法将其值设为空字符串，即可清空已选择的文件队列。接着，再次绑定 change 事件，在每次选择文件时再次清空文件队列，这样就可以每次选择文件时都清空之前选择的文件队列了。

layui多个file与提交同时进行_layui.upload实现文件上传控制

您好，关于多个文件上传和提交同时进行的控制，可以使用 layui.upload 的 before 函数来实现。

示例代码如下：

layui.use('upload', function(){
  var upload = layui.upload;
  
  //多文件列表示例
  var demoListView = $('#demoList'),
    uploadListIns = upload.render({
      elem: '#testList',
      url: '/upload/',
      accept: 'file',
      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/1014).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(); //上传loading
        //模拟loading
        setTimeout(function(){
          layer.closeAll('loading');
        }, 2000);
      },
      done: function(res, index, upload){
        if(res.code == 0){ //上传成功
          var tr = demoListView.find('tr#upload-'+ index),
            tds = tr.children();
          tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
          tds.eq(3).html(''); //清空操作
          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'); //显示重传
      }
    });
  
});

其中，before 函数用于上传之前的处理，这里可以添加 loading 等提示信息，确保上传过程中用户可以看到正在处理。

另外，由于 layui.upload 是基于 layui.form 实现的，所以在页面中需要有一个 form 标签，同时需要设置一个 bindAction 参数指向提交按钮，这样在上传完成后才能触发表单提交。

希望这个示例代码能够帮助到您。