WebUploader 解決文件多次上傳和刪除上傳文件的問題

文件多次上傳有兩種情況：

1. 上傳前的多次選擇

2. 上傳成功后，再次選擇

 

其實API上，已經有了介紹了，不知道為什么有同學還是不知道如何做，我來拋磚引玉吧。

配置項：

• duplicate {Boolean} [可選] [默認值：undefined] 

  去重， 根據文件名字、文件大小和最后修改時間來生成hash Key.

將dupliacate設置為true,  允許文件多次上傳

其實有了這個配置就可以了，不過uploader有個getFiles方法，這個方法容易上人產生誤解，

通常會認為getFiles方法 獲取的是准備要上傳的文件，其實不然。API介紹如下：

getFiles

• getFiles() ⇒ Array
• getFiles( status1, status2, status... ) ⇒ Array

返回指定狀態的文件集合，不傳參數將返回所有狀態的文件。

這里的狀態如下：

File.Status

文件狀態值，具體包括以下幾種類型：

• inited 初始狀態
• queued 已經進入隊列, 等待上傳
• progress 上傳中
• complete 上傳完成。
• error 上傳出錯，可重試
• interrupt 上傳中斷，可續傳。
• invalid 文件不合格，不能重試上傳。會自動從隊列中移除。
• cancelled 文件被移除。

就是說，只要我們的uploader對象沒有重新創建，那它會保存所有選擇的文件，

當然我們也有方法，clear一下， 我們看到有這樣的方法：

removeFile

• removeFile( file ) ⇒ undefined
• removeFile( id ) ⇒ undefined
• removeFile( file, true ) ⇒ undefined
• removeFile( id, true ) ⇒ undefined

參數:

• file {File, id}

  File對象或這File對象的id

移除某一文件, 默認只會標記文件狀態為已取消，如果第二個參數為 true 則會從 queue 中移除。

當我們調用了一下removeFile方法后，只是標記了一下這個文件的狀態，我們用getFiles方法，其實還是可以看到，

這時我們可以再調用方法：

reset

• reset() ⇒ undefined

重置uploader。目前只重置了隊列。就可以清除勾選的上傳文件了

 

我的做法是，在uploadSuccess事件中，調用removeFile方法，注意這個事件也是針對一個文件的

//成功事件,  針對一個文件
uploader.on('uploadSuccess', function (file, response) {
    
　　uploader.removeFile(file);

});

 

最后在uploadFinished事件中，調用reset方法，再就可清空getfiles了。

// 所有文件上傳成功后調用        
uploader.on('uploadFinished', function () {
    //清空隊列
     uploader.reset();
});

 

 

附，API地址：http://fex.baidu.com/webuploader/doc/index.html