JS - 文件上传组件WebUploader使用详解9（所有事件说明、事件响应）

2019-01-30 发布：hangge 阅读：3485

1，事件监听

（1）WebUploader 从文件选择开始到上传完毕的各个阶段都会发出相应的事件，我们可以通过监听指定的事件来执行相关的业务逻辑。

（2）比如下面样例，我们监听上传成功事件，并在成功时弹出提示框。

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

// 文件上传成功后会调用
uploader.on( 'uploadSuccess', function( file ) {
    alert("上传成功!");
});

2，所有事件介绍

事件名	参数	描述
dndAccept	items {DataTransferItemList} DataTransferItem	阻止此事件可以拒绝某些类型的文件拖入进来。目前只有 chrome 提供这样的 API，且只能通过 mime-type 验证。
beforeFileQueued	file {File} File对象	当文件被加入队列之前触发，此事件的 handler 返回值为false，则此文件不会被添加进入队列。
fileQueued	file {File} File对象	当文件被加入队列以后触发。
filesQueued	files {File} 数组，内容为原始File(lib/File）对象。	当一批文件添加进队列以后触发。
fileDequeued	file {File} File对象	当文件被移除队列后触发。
reset		当 uploader 被重置的时候触发。
startUpload		当开始上传流程时触发。
stopUpload		当开始上传流程暂停时触发。
uploadFinished		当所有文件上传结束时触发。
uploadStart	file {File} File对象	某个文件开始上传前触发，一个文件只会触发一次。
uploadBeforeSend	object {Object} data {Object} 默认的上传参数，可以扩展此对象来控制上传参数。 headers {Object} 可以扩展此对象来控制上传头部。	当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
uploadAccept	object {Object} ret {Object} 服务端的返回数据，json格式，如果服务端不是json格式，从ret._raw中取数据，自行解析。	当某个文件上传到服务端响应后，会派送此事件来询问服务端响应是否有效。如果此事件 handler 返回值为 false, 则此文件将派送 server 类型的 uploadError 事件。
uploadProgress	file {File} File对象 percentage {Number} 上传进度	上传过程中触发，携带上传进度。
uploadError	file {File} File对象 reason {String} 出错的code	当文件上传出错时触发。
uploadSuccess	file {File} File对象 response {Object} 服务端返回的数据	当文件上传成功时触发。
uploadComplete	file {File} [可选]File对象	不管成功或者失败，文件上传完成时触发。
error	type {String} 错误类型。	当 validate 不通过时，会以派送错误事件的形式通知调用者。通过 upload.on('error', handler) 可以捕获到此类错误，目前有以下错误会在特定的情况下派送错来。 Q_EXCEED_NUM_LIMIT 在设置了 fileNumLimit 且尝试给 uploader 添加的文件数量超出这个值时派送。 Q_EXCEED_SIZE_LIMIT 在设置了 Q_EXCEED_SIZE_LIMIT 且尝试给 uploader 添加的文件总大小超出这个值时派送。 Q_TYPE_DENIED 当文件类型不满足时触发。