WebUploader批量上传

WebUploader 是一个基于 HTML5 的文件上传组件，提供了丰富的上传功能和良好的用户体验。使用 WebUploader 实现批量上传文件可以通过以下步骤：

1. 引入 WebUploader 组件的 JS 和 CSS 文件。
2. 创建一个 HTML 元素作为文件上传区域。
3. 配置 WebUploader 组件，包括上传 URL、上传文件类型、上传文件大小等。
4. 监听文件添加和上传成功等事件，实现相应的业务逻辑。

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

HTML：

<div id="uploader">
  <div class="file-list"></div>
  <div class="btns">
    <div id="picker">选择文件</div>
    <button id="start-upload-btn" type="button">开始上传</button>
  </div>
</div>

JS：

var uploader = WebUploader.create({
  // 选完文件后，是否自动上传。
  auto: false,

  // 文件接收服务端。
  server: 'upload.php',

  // 上传文件类型限制。
  accept: {
    title: 'Images',
    extensions: 'gif,jpg,jpeg,bmp,png',
    mimeTypes: 'image/*'
  },

  // 单个文件上传大小限制。
  fileSingleSizeLimit: 5 * 1024 * 1024,

  // 批量上传大小总限制。
  fileSizeLimit: 100 * 1024 * 1024,

  // 上传并发数，默认为3。
  threads: 3
});

// 当文件添加进队列时触发。
uploader.on('fileQueued', function(file) {
  $('.file-list').append('<div class="file-item">' + file.name + '</div>');
});

// 当文件上传成功时触发。
uploader.on('uploadSuccess', function(file, response) {
  console.log('文件上传成功：' + file.name);
});

// 点击开始上传按钮时触发。
$('#start-upload-btn').on('click', function() {
  uploader.upload();
});

在上面的示例中，我们创建了一个文件上传区域，并配置了上传 URL、上传文件类型、上传文件大小等信息。当用户选择文件后，文件会被添加到上传队列中。当用户点击开始上传按钮时，所有文件将被批量上传到服务端。在上传过程中，我们通过监听文件上传成功事件来实现相应的业务逻辑。