WebUploader

work

Using WebUploader as 3pp to upload files to system.

1. 初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 仅包含了常用参数
var uploader = new WebUploader.Uploader({
    duplicate: true, // 是否允许重复文件 default undefined
    auto: false,  // 选完文件后，是否自动上传
    swf: 'path_of_swf/Uploader.swf',  // swf文件路径
    server: "/upload.html", // 文件接收服务端
    pick: { id: "#uploadFile", innerHTML: "localImg" }, // 选择文件的按钮。可选
    accept: { // sample, 只允许选择图片文件
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
    },
    threads: 1, // 线程数
    fileSingleSizeLimit: 2000,  // 单文件大小限制
    fileNumLimit: 10,  // 单次上传文件数量限制
    fileSingleSizeLimit:  // 验证单个文件大小是否超出限制, 超出则不允许加入队列
    compress:false, // 是否压缩上传
    chunked: true, // 是否要分片处理大文件上传, default false
    chunkSize: 5242880, // 如果要分片，分多大一片？ default 5242880 (5M)
    chunkRetry: 1,  // 如果某个分片由于网络问题出错，允许自动重传多少次？ default 2
    threads: 1, // 上传并发数。允许同时最大上传进程数 default 3
    formData:{}, // 文件上传请求的参数表，每次发送都会发送此对象中的参数
    method: 'GET',  // POST or GET, default POST
  });

2. 监听event

仅列举常用event

  • uploadAccept
    当某个文件上传到服务端响应后，会派送此事件来询问服务端响应是否有效。如果此事件handler返回值为false, 则此文件将派送server类型的uploadError事件
    1
    2
    3
    4
    5
    uploader.on('uploadAccept', function (file, response) {
        if (response.error) {
          this.uploader.trigger('uploadError', file, response.UserMessage);
        }
    });
  • uploadSuccess
    当文件上传成功时触发（单文件上传成功）
    1
    2
    3
    uploader.on('uploadSuccess', function (file) {
        this._saveSuccessHandler(file);
    });
  • uploadError
    当文件上传出错时触发
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    uploader.on('uploadError', function (file, reason) {
          var xhr = {}, responseJSON = {};
          responseJSON.UserMessage = reason;
          xhr.status = 500;
          xhr.responseJSON = responseJSON;
          if (reason) {
              createErrorDialog(xhr, 500, "upload failed");
          }
          this.uploader.reset();  // uploader重置
          this.submitBtn.removeAttribute('disabled');
      });
    For more details: https://www.jianshu.com/p/9f669deebf82