webUploader的使用记录
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。
采用大文件分片并发上传，极大的提高了文件上传效率。引入资源,使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。
- html部分
选择文件
- 初始化Web Uploader
var uploader = WebUploader.create({
auto: true,// 选完文件后，是否自动上传。
swf: './js/webuploader-0.1.5/Uploader.swf',// swf文件路径
server: 'http://receive.com/v1/book/upload',// 文件接收服务端。
dnd: '.upload-container',
pick: '#picker',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
multiple: true, // 选择多个
chunked: true,// 开起分片上传。
threads: 5, // 上传并发数。允许同时最大上传进程数。
method: 'POST', // 文件上传方式，POST或者GET。
fileSizeLimit: 1024*1024*100*10, //验证文件总大小是否超出限制, 超出则不允许加入队列。
fileSingleSizeLimit: 1024*1024*100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
fileVal:'epub', // [默认值：'file'] 设置文件上传域的name。
});
- 添加文件到队列时
uploader.on( 'fileQueued', function( file ) {
// 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等
console.log(file.ext) // 获取文件的后缀
console.log(file.size) // 获取文件的大小
console.log(file);
});
- 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
console.log(percentage * 100 + '%');
});
- 上传成功时触发的
uploader.on( 'uploadSuccess', function( file,response ) {
console.log(file.id+"传输成功");
});
- 上传失败时触发的
uploader.on( 'uploadError', function( file ) {
console.log(file);
console.log(file.id+'upload error')
});
- 取消上传
$('.upload-list').on('click', '.btn-remove', function(){
// 从文件队列中删除某个文件id
file_id = $(this).data('id');
uploader.removeFile(file_id, true); // 从队列中删除
// console.log(uploader.getFiles()) // 队列显示还在 其实已经删除
});
- 重试上传，重试指定文件，或者从出错的文件开始重新上传。
$('.upload-list').on('click', '.upload-item__progress span', function(){
uploader.retry($(this).data('file'));
});
- 上传完成
uploader.on( 'uploadComplete', function( file ) {
console.log(uploader.getFiles());
});
- 一个简陋的demo
webuploader
点击或将文件拖拽至此上传
- 相关链接
Webuploader Getting Started