layui 2.8 多文件上传完毕后会多次触发回调

Layui 2.8版本的多文件上传组件在上传完毕后确实会多次触发回调函数的问题，这是因为该版本的组件在上传完毕后会执行一次文件列表的重置操作，而这个操作会触发一次回调函数的执行。为了解决这个问题，你可以在回调函数中判断文件列表是否为空，如果为空则不执行相关操作，如下所示：

upload.render({
  elem: '#test'
  ,url: '/upload/'
  ,done: function(res){
    //上传完毕回调
    if(this.files.length > 0){
      console.log(res);
    }
  }
});

在这个示例中，我们在回调函数中判断了文件列表是否为空，如果不为空则执行相应的操作，否则不执行。这样就可以避免重复触发回调函数的问题。

相关问题

layui 2.8将 upload.render()被多次执行后，点击“bindAction”会多次触发上传

是的，在layui 2.8中，如果你多次执行upload.render()，然后在某个时刻点击“上传”按钮，就会发现上传事件会被多次触发。这是因为每次执行upload.render()都会新建一个上传实例，而这些实例都会绑定上传事件。

为了解决这个问题，可以在执行upload.render()之前，先判断该元素是否已经绑定了上传事件。如果已经绑定，则直接返回该上传实例，否则再新建一个上传实例并绑定事件。

示例代码如下：

var uploadInst = uploadInst || upload.render({
  elem: '#test',
  url: '/upload/',
  done: function(res){
    console.log(res)
  }
});

// 点击上传时触发
$('#uploadBtn').on('click', function(){
  // 触发上传
  uploadInst.upload();
});

在这个示例中，我们使用了uploadInst变量来保存上传实例。在点击上传按钮时，直接调用uploadInst.upload()来触发上传。这样，无论upload.render()被执行了多少次，都只会有一个上传实例并绑定了上传事件，避免了多次触发上传事件的问题。

layui写多个文件上传

### 回答1：
好的，我会用中文来回答关于 layui 写多个文件上传的问题。

Layui 是一个基于 jQuery 的前端框架，其中包含了许多常用的组件，其中之一就是文件上传组件。

要在 Layui 中实现多个文件上传，可以使用 layui 的 upload 模块。首先，你需要引入 layui 的 CSS 和 JavaScript 文件，然后在页面中创建一个文件上传的容器，例如：

<div id="upload-container"></div>

然后，可以使用以下代码来初始化文件上传组件：

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

  // 多文件列表示例
  var demoListView = $('#demoList')
  ,uploadListIns = upload.render({
    elem: '#upload-container'
    ,url: '/upload/'
    ,accept: 'file'
    ,multiple: true
    ,auto: false
    ,bindAction: '#btn-start-upload'
    ,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);
        });

        //  

### 回答2：
在layui中，如果要实现多个文件上传，可以借助 layui 的 upload 模块。首先，需要在页面中引入 layui 和 jQuery 的库文件。然后，定义一个上传按钮，并给其添加一个 id，比如"uploadBtn"。

接下来，通过 layui.use() 方法来加载并使用 upload 模块。在 use() 方法中，需要传入一个数组，数组的第一个元素就是 upload 模块的名称。

然后，通过 layui.upload.render() 方法来渲染上传按钮。在 render() 方法中，需要传入一个对象，来配置上传的一些参数。其中，elem 属性表示上传按钮的选择器，即"#uploadBtn"；url 属性表示文件上传的地址；multiple 属性表示是否支持多文件上传，如果需要，则设置为 true。

此外，还可以设置一些回调函数，如 done() 方法表示文件上传完毕后的回调，可以在其中执行一些操作，比如显示上传成功的提示信息；error() 方法表示上传接口出现异常时的回调，可以在其中处理异常情况。注意，done() 方法和 error() 方法都有一个参数，可以获取到上传成功或失败后的一些数据。

最后，使用 form.on() 方法监听按钮的提交事件，并在事件处理函数中调用 upload.render() 方法。

以上就是使用 layui 实现多个文件上传的步骤。同时，需要注意在服务器端进行相应的文件接收和处理。  

### 回答3：
layui是一款基于原生JavaScript开发的前端UI框架，提供了丰富易用的组件，其中包括文件上传组件。要实现多个文件上传，可以按照以下步骤进行操作：

1. 引入layui和相关依赖：在HTML页面中引入layui框架，同时需要引入layui的upload组件。

2. 添加文件上传的HTML代码：定义一个上传文件的区域，可以使用HTML的`<input type="file">`标签实现，可以添加多个input元素，每个元素用于选择一个文件。

3. 初始化layui的上传组件：在JavaScript代码中，使用`layui.upload()`函数初始化上传组件，可以通过传入配置参数的方式自定义上传的行为。

4. 配置上传行为：在上传组件的配置参数中，可以设置上传的URL、完成上传后的回调函数等。同时，可以设置`multiple: true`来支持多个文件同时上传。

5. 处理文件上传的回调函数：根据上传结果，可以在回调函数中对上传的文件进行处理，如预览、显示上传进度等。

6. 实现文件上传的提交：可以使用layui的`upload()`方法触发文件的上传操作，在选择完文件后，通过点击一个按钮来触发上传操作。

7. 样式美化和其他自定义：layui自带的文件上传组件样式简单，可以根据自己的需求进行美化或添加其他自定义功能。

通过以上步骤，就可以实现layui多个文件的上传功能。在实际应用中，可以根据需要定制上传组件的样式和功能，满足项目的需求。