JS - 文件上传组件WebUploader使用详解8（常用属性、配置参数）

2019-01-28 发布：hangge 阅读：5641

为了应对不同的场景，满足不同的需求，WebUploader 提供了丰富的配置参数供我们使用，下面对其一一介绍。

1，accept（允许接受哪些类型的文件）

（1）这是一个可选属性，使用该属性可以指定用户只能上传哪种类型的文件，具体内容如下：

title：文字描述
extensions：允许的文件后缀（不带点，多个用逗号分割）
mimeTypes：多个用逗号分割

（2）下面样例只允许选择图片文件。

//初始化Web Uploader
var uploader = WebUploader.create({
    // swf文件路径
    swf: 'webuploader/Uploader.swf',
    // 文件接收服务端。
    server: 'http://www.hangge.com/upload.php',
    // 选择文件的按钮。可选。
    pick: '#picker',
    // 指定文件类型
    accept: {
      title: 'Images',
      extensions: 'gif,jpg,jpeg,bmp,png',
      mimeTypes: 'image/*'
    }
});

2，dnd（指定 Drag And Drop 拖拽的容器）

这是一个可选属性，可以指定一个 Selector，如果不指定则不启动该功能。
默认值：undefined

3，disableGlobalDnd（是否禁掉整个页面的拖拽功能）

这是一个可选属性，默认值：false
如果不禁用，图片拖进来的时候默认会被浏览器打开。

4，paste（监听 paste 事件的容器）

这是一个可选属性，可以指定一个 Selector，默认值：undefined
此功能为通过粘贴来添加截屏的图片。如果不指定，不启用此功能。
建议设置为 document.body

5，pick（指定选择文件的按钮容器）

（1）这是一个可选属性，默认值：undefined，如果不指定则不创建按钮。

（2）这个属性可以直接设置一个 Selector：

//初始化Web Uploader
var uploader = WebUploader.create({
    // swf文件路径
    swf: 'webuploader/Uploader.swf',
    // 文件接收服务端。
    server: 'http://www.hangge.com/upload.php',
    // 选择文件的按钮。可选。
    pick: '#picker'
});

（3）也可以传入一个 Object，其内容为：

id：指定选择文件的按钮容器，不指定则不创建按钮。注意这里虽然写的是 id，但是不是只支持 id，还支持 class，或者 dom 节点。
innerHTML：指定按钮文字。不指定时优先从指定的容器中看是否自带文字。
multiple：Boolean 类型，表示是否开起同时选择多个文件能力

//初始化Web Uploader
var uploader = WebUploader.create({
    // swf文件路径
    swf: 'webuploader/Uploader.swf',
    // 文件接收服务端。
    server: 'http://www.hangge.com/upload.php',
    // 选择文件的按钮。可选。
    pick: {
      id: "#picker",
      innerHTML: "<span style='color:red'>按钮文字</span>",
      multiple: false //不允许多选
    }
});

6，thumb（配置生成缩略图的选项）

（1）缩略图指的是客户端这边选择图片后在页面上预览展示的小图，它的配置不会影响实际上传图片。

（2）该属性配置是可选的，默认值如下：

//初始化Web Uploader
var uploader = WebUploader.create({
    // swf文件路径
    swf: 'webuploader/Uploader.swf',
    // 文件接收服务端。
    server: 'http://www.hangge.com/upload.php',
    // 选择文件的按钮。可选。
    pick: '#picker',
    // 缩略图默认配置
    thumb: {
      width: 110,
      height: 110,
      // 图片质量，只有type为`image/jpeg`的时候才有效。
      quality: 70,
      // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
      allowMagnify: true,
      // 是否允许裁剪。
      crop: true,
      // 为空的话则保留原有图片格式。
      // 否则强制转换成指定的类型。
      type: 'image/jpeg'
    }
});

7，compress（配置压缩的图片的选项）

（1）默认情况下，WebUploader 会对图片进行压缩后再上传，其默认配置如下：

//初始化Web Uploader
var uploader = WebUploader.create({
    // swf文件路径
    swf: 'webuploader/Uploader.swf',
    // 文件接收服务端。
    server: 'http://www.hangge.com/upload.php',
    // 选择文件的按钮。可选。
    pick: '#picker',
    // 图片压缩配置
    compress: {
      width: 1600,
      height: 1600,
      // 图片质量，只有type为`image/jpeg`的时候才有效。
      quality: 90,
      // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
      allowMagnify: false,
      // 是否允许裁剪。
      crop: false,
      // 是否保留头部meta信息。
      preserveHeaders: true,
      // 如果发现压缩后文件大小比原来还大，则使用原来图片
      // 此属性可能会影响图片自动纠正功能
      noCompressIfLarger: false,
      // 单位字节，如果图片大小小于此值，不会采用压缩。
      compressSize: 0
  }
});

（2）我们也可以直接将其设置为 false，让图片在上传前不进行压缩。

//初始化Web Uploader
var uploader = WebUploader.create({
    // swf文件路径
    swf: 'webuploader/Uploader.swf',
    // 文件接收服务端。
    server: 'http://www.hangge.com/upload.php',
    // 选择文件的按钮。可选。
    pick: '#picker',
    // 不压缩image
    compress: false
});

8，auto（自动上传）

这是一个可选属性，如果将其设置为 true，不需要手动再去调用上传，只要一有文件选择即开始上传。

9，runtimeOrder（指定运行时启动顺序）

默认值：html5,flash。即先尝试 html5 是否支持，如果支持则使用 html5，否则则使用 flash。
可以将此值设置成 flash，来强制使用 flash 运行时。

10，prepareNextFile（是否允许在文件传输时提前把下一个文件准备好）

这是一个可选属性，默认值：false
对于一个文件的准备工作比较耗时，比如图片压缩，md5 序列化。如果能提前在当前文件传输期处理，可以节省总体耗时。

11，chunked（是否要分片处理大文件上传）

这是一个可选属性，默认值：false

12，chunkSize（每个分片大大小）

这是一个可选属性，默认值：5242880，即 5M

13，chunkRetry（某分片遇到网络错误，允许自动重传次数）

这是一个可选属性，默认值：2

14，threads（上传并发数）

即允许同时最大上传进程数。这是一个可选属性，默认值：3

15，formData（文件上传时携带的自定义参数）

每次发送都会发送此对象中的参数。这是一个可选属性，默认值：{}

16，fileVal（文件上传域的name）

这是一个可选属性，默认值：'file'

17，method（文件上传方式）

这是一个可选属性，默认值：'POST'，我们也可以改成 'GET'

18，sendAsBinary（是否已二进制的流的方式发送文件）

这是一个可选属性，默认值：false
如果将其设置为 true，则整个上传内容 php://input 都为文件内容，其他参数在 $_GET 数组中。

19，fileNumLimit（文件数量限制）

这是一个可选属性，默认值：undefined，即不限制。
我们可以设置一个具体数字，当文件数量超出时则不允许加入队列。

20，fileSizeLimit（文件总大小限制）

这是一个可选属性，默认值：undefined，即不限制。
我们可以设置一个具体值，文件总大小将要超出限制时，不允许新文件加入队列。

21，fileSingleSizeLimit（单个文件大小限制）

这是一个可选属性，默认值：undefined，即不限制。
我们可以设置一个具体值，如果单个文件超出限制则不允许加入队列。

22，duplicate（去重）

这是一个可选属性，默认值：false，即不允许重复。
判断重复与否是根据文件名字、文件大小和最后修改时间来生成 hash Key 进行比对。

23，disableWidgets（widget黑名单）

这是一个可选属性，默认值：undefined，即所有 Uploader.register 了的 widget 都会被加载。
如果禁用某一部分，请通过此 option 指定黑名单。