Web Uploader 是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5 为主,FLASH 为辅的现代文件上传组件。在现代的浏览器里面能充分发挥 HTML5 的优势,同时又不摒弃主流 IE 浏览器,沿用原来的FLASH 运行时,兼容 IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。
采用大文件分片并发上传,极大的提高了文件上传效率。
官网:http://fex.baidu.com/webuploader/
引入资源
使用 Web Uploader 文件上传需要引入三种资源:JS, CSS, SWF
<!--引入 CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入 JS--> <script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
html 部分
<div id="uploader"> <!--用来存放文件信息--> <div id="thelist"></div> <div> <div id="picker">选择文件</div> <button id="ctlBtn" class="btn btn-default">开始上传</button> </div> </div>
初始化 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
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>webuploader</title> </head> <!--引入CSS--> <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.css"> <style> #upload-container, #upload-list{width: 500px; margin: 0 auto; } #upload-container{cursor: pointer; border-radius: 15px; background: #EEEFFF; height: 200px;} #upload-list{height: 800px; border: 1px solid #EEE; border-radius: 5px; margin-top: 10px; padding: 10px 20px;} #upload-container>span{widows: 100%; text-align: center; color: gray; display: block; padding-top: 15%;} .upload-item{margin-top: 5px; padding-bottom: 5px; border-bottom: 1px dashed gray;} .percentage{height: 5px; background: green;} .btn-delete, .btn-retry{cursor: pointer; color: gray;} .btn-delete:hover{color: orange;} .btn-retry:hover{color: green;} </style> <!--引入JS--> <body> <div id="upload-container"> <span>点击或将文件拖拽至此上传</span> </div> <div id="upload-list"> <!-- <div> <span>文件名:123</span> <span data-file_id="">删除</span> <span data-file_id="">重试</span> <div></div> </div> --> </div> <button id="picker" style="display: none;">点击上传文件</button> </body> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <script src="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.js"></script> <script> $('#upload-container').click(function(event) { $("#picker").find('input').click(); }); var uploader = WebUploader.create({ auto: true,// 选完文件后,是否自动上传。 swf: 'https://cdn.bootcss.com/webuploader/0.1.1/Uploader.swf',// swf文件路径 server: 'http://www.test.com/zyb.php',// 文件接收服务端。 dnd: '#upload-container', pick: '#picker',// 内部根据当前运行是创建,可能是input元素,也可能是flash. 这里是div的id multiple: true, // 选择多个 chunked: true,// 开起分片上传。 threads: 5, // 上传并发数。允许同时最大上传进程数。 method: 'POST', // 文件上传方式,POST或者GET。 fileSizeLimit: 1024*1024*100*100, //验证文件总大小是否超出限制, 超出则不允许加入队列。 fileSingleSizeLimit: 1024*1024*100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。 fileVal:'upload', // [默认值:'file'] 设置文件上传域的name。 }); uploader.on('fileQueued', function(file) { // 选中文件时要做的事情,比如在页面中显示选中的文件并添加到文件列表,获取文件的大小,文件类型等 console.log(file.ext) // 获取文件的后缀 console.log(file.size) // 获取文件的大小 console.log(file.name); var html = '<div><span>文件名:'+file.name+'</span><span data-file_id="'+file.id+'">删除</span><span data-file_id="'+file.id+'">重试</span><div class="percentage '+file.id+'" style="width: 0%;"></div></div>'; $('#upload-list').append(html); }); uploader.on('uploadProgress', function(file, percentage) { console.log(percentage * 100 + '%'); var width = $('.upload-item').width(); $('.'+file.id).width(width*percentage); }); 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', '.upload-item .btn-delete', function() { // 从文件队列中删除某个文件id file_id = $(this).data('file_id'); // uploader.removeFile(file_id); // 标记文件状态为已取消 uploader.removeFile(file_id, true); // 从queue中删除 console.log(uploader.getFiles()); }); $('#upload-list').on('click', '.btn-retry', function() { uploader.retry($(this).data('file_id')); }); uploader.on('uploadComplete', function(file) { console.log(uploader.getFiles()); }); </script> </html>
完成品 Demo
「本文由 Savalone 原创或搜集整理发布,转载请遵守 CC BY-NC-ND 4.0 许可!」