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