JS - 文件上传组件WebUploader使用详解8（常用属性、配置参数）
作者：hangge | 2019-01-28 08:10
为了应对不同的场景，满足不同的需求，WebUploader 提供了丰富的配置参数供我们使用，下面对其一一介绍。
（3）也可以传入一个 Object，其内容为：
（2）我们也可以直接将其设置为 false，让图片在上传前不进行压缩。
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 指定黑名单。
全部评论（0）