layui.js多文件上传 顺序

在 layui 中，使用 `upload.render()` 方法进行多文件上传，可以通过 `before()` 函数来控制上传文件的顺序。

具体来说，你可以为每个上传按钮设置一个 `data-index` 属性，表示该按钮对应的文件在整个上传队列中的排序位置。然后在 `before()` 函数中，将上传队列按照 `data-index` 属性进行排序，以保证文件按照预期顺序上传。

以下是一个简单的示例代码：

upload.render({
  elem: '#uploadBtn',
  url: '/upload/',
  multiple: true,
  before: function (obj) {
    var files = obj.pushFile(); // 将选择的文件加入到上传队列中
    files.sort(function (a, b) {
      return parseInt($(a.elem).data('index')) - parseInt($(b.elem).data('index'));
    }); // 按照 data-index 排序
  },
  done: function (res) {
    console.log(res);
  }
});

需要注意的是，由于上传是异步的过程，所以在 `before()` 函数中进行的排序并不能保证文件上传的顺序，只能尽可能地控制上传时的顺序。如果需要确保上传完成后文件的顺序，可以在 `done()` 函数中进行处理。

相关问题

layui.all.js 2.5.6 引入后还是没有layui.event

在使用 layui.all.js 2.5.6 时，要注意以下几点：

1. 确认是否正确引入了 layui.all.js 文件；

2. 确认是否在 layui.use() 方法中正确加载模块，例如：

layui.use(['layer', 'form'], function(){
  var layer = layui.layer,
      form = layui.form;

  // code here...
});

3. 确认是否在 layui.use() 方法中注册了事件，例如：

layui.use('element', function(){
  var element = layui.element;

  // 需要注册事件的代码
  element.on('tab(demo)', function(data){
    console.log(data);
  });
});

如果还是没有解决问题，可以尝试在浏览器 console 中查看是否有报错信息，或者到 layui 官方社区提问寻求帮助。

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 参数指向提交按钮，这样在上传完成后才能触发表单提交。

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