最近，要做文件上傳功能，在同事推薦下，選擇了webUploader插件。WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件，詳情請看官網(直接百度webUploader，應該是第一個)。挺好用的，于是小結一下。

1. 準備工作

1.1 先搭建服務，選用wamp/xamp或其他服務

1.2 下載webUploader 下載地址: https://github.com/fex-team/webuploader

2. 選用demo

點擊選擇圖片(其他文件也可以)就可以上傳啦！

遇到的幾個問題

1. 上傳稍微大一點(10M+)的文件可能會有點問題，文件名被改，文件也會出錯。文件被重命名成file_*

2. 限制上傳文件大小等配置

3. 上傳文件至服務器地址修改 (自定義)

4. 在上傳文件前事件

4.1 上傳前文件格式檢測

5. 根據自己需求要在上傳前做驗證

6. 獲取已添加的所有文件對象

7.上傳時，攜帶自定義參數

8.上傳大圖片被壓縮，而其他文件沒有問題

9. uploader.removeFile( file, true )無效， 執行getFiles()刪除的文件還在file數組里

上傳稍微大一點(10M+)的文件可能會有點問題，文件名被改，文件也會出錯。文件被重命名成file_*，例如:file_58f4a2fc7dde0, 這問題也困擾我很久，在github webUploader的issue里，也發現有人有同樣的問題，https://github.com/fex-team/webuploader/issues/263?但是我這里是沒有解決。

后來查找官方API才找到答案，原來是大文件沒有切片導致啊！！！！

解決辦法: 在upload.js 中，uploader實例化的時候設置切片chunked: true,

在這位置，可以更改一些配置，如看”點擊上傳圖片”不順眼，想改成“上傳文件”，就在pick那改。

還有的想把上傳文件的大小限制改動下，也可以根據自己需求在這里的fileSizeLimit那里改。

fileNumLimit {int} [可選] [默認值：undefined] 驗證文件總數量, 超出則不允許加入隊列。

fileSizeLimit {int} [可選] [默認值：undefined] 驗證文件總大小是否超出限制, 超出則不允許加入隊列。

fileSingleSizeLimit {int} [可選] [默認值：undefined] 驗證單個文件大小是否超出限制, 超出則不允許加入隊列。

改成切片后，再上傳文件，

成功！ 完美。

那這里又存在一個疑問，那文件上傳的位置在哪里更改呢？

在server/fileupload.php 中改targetDir和uploadDir

在server/fileupload.php 中改targetDir和uploadDir

a. 在上傳文件前事件

//我自己的需求是，只能添加xml格式和zip格式文件

//webuploader.js

input.on( 'change', function( e ) {

var fn = arguments.callee,

clone;

//code

/**下面檢測文件格式的方法不推薦！不推薦！！！ (webuploader實例化中有配置)

在file 對象中有個ext屬性是文件格式的，可以用。

*/

上傳前文件格式檢測

在webuploader實例化那里可以配置，詳情看官網文檔

我這里還有需要根據權限的不同去指定上傳文件格式，我用個數組/字符串變量保存 (具體是字符串還是數組，請參看源碼中怎么加，你就怎么加)

實際上在這里加，只是在你點擊添加文件時，那個彈框就給你過濾了其他文件，留下你指定的文件類型。

如圖。若用戶吧把那個自定義文件下拉框換成全部文件，就可以添加其他文件了(剛剛自測了一把)。

顯然，這與我們需求不符，uploader實例化配置accept只是個簡單的過濾而已，

所以還是得在文件添加到控件中，就自己檢測。(個人覺得，就按我上面的那樣，一旦用戶添加進來了，就里面檢測，添加不通過直接打回去)

b. 根據自己需求要在上傳前做驗證

//在662行左右，點擊時做驗證

$upload.on('click', function() {

if ( $(this).hasClass( 'disabled' ) ) {

return false;

}

c. 獲取已添加的所有文件對象

//有時需要把所有文件做個判斷啥的，就需要用到

var fileItem = uploader.getFiles();

//要文件添加進去了，才有用。在剛剛添加文件時，是無效的。

//uploader是一個實例

d. 上傳時，攜帶自定義參數

//見uploader實例化

uploader.options.formData.houseName = houseName;

uploader.options.formData.houseType = houseType;

uploader.options.formData.address = district;

//添加到實例化后就可以了，

//地址瞎寫的，

e. 上傳大圖片被壓縮，而其他文件沒有問題

之前自己檢測過，上傳大文件(非圖片)到服務器上，與上傳前文件對比大小，是沒有問題的。 但是今天同事說，他傳的圖片(8M)被壓縮(400kb左右)了，剛剛開始還不信，畢竟之前自己檢測過，上傳后的文件和原文件的大小一致。 后來查官方文檔才知道真被壓縮了。 文檔是這么說的

解決辦法: 在uploader實例化的時候，加個參數 compress: false;

9. uploader.removeFile( file, true )無效， 執行getFiles()刪除的文件還在file數組里

測試給我提個單，說刪除有問題。

額·····

后來自己定位到，在點擊刪除時，執行到uploader.removeFile(file), 居然只是從視圖中刪除了？ 沒從file數組刪除？？？？

什么鬼？

后來查官方API，說只要把removeFile()方法后面加個true就可以了。然并卵。。。。

再去github issue查，這種問題還真有好幾個，

只要在webuploader.js 中加幾行代碼就好。

1. 在webuploader.js 中搜到 function Queue() 方法

2. 在里面添加 刪除方法

_delFile : function(file){

for(var i = this._queue.length-1 ; i >= 0 ;i-- ){

if(this._queue[i] == file){

this._queue.splice(i,1);

break;

}

}

},

然后再在removeFile: function( file ) { 調用下就好了

最后附上一張gif，不騙你們啦~~

總結

以上是生活随笔為你收集整理的清除服务器上传队列的文件,webUploader上传demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。