-
webUploader的使用記錄
-
WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH運行時，兼容IE6+，iOS 6+, android 4+。兩套運行時，同樣的調用方式，可供用戶任意選用。
采用大文件分片並發上傳，極大的提高了文件上傳效率。 -
引入資源,使用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>
<div id="uploader" class="wu-example">
<!--用來存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<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 lang="en">
<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 class="upload-item"> <span>文件名：123</span> <span data-file_id="" class="btn-delete">刪除</span> <span data-file_id="" class="btn-retry">重試</span> <div class="percentage"></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 class="upload-item"><span>文件名：'+file.name+'</span><span data-file_id="'+file.id+'" class="btn-delete">刪除</span><span data-file_id="'+file.id+'" class="btn-retry">重試</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>