重置 bootstrap-fileinput


最近在使用 bootstrap-fileinput 插件時,碰到了這樣的問題:

場景:

我在表單中使用了bootstrap-fileinput 插件,且已經上傳了文件,顯示出了文件上傳之后的預覽框。

當我點擊reset 按鈕時,調用一個resetFrom()方法, 方法里調用了插件的 clear方法: 

1 $scope.resetForm = function(){
2 
3   ...
4 
5   angular.element('#file-input').fileinput('clear')
6   ...
7 
8 }

 

發現無法將上傳的文件預覽視圖去除,這時我到官網查閱了Api,官網上是這樣寫的:

Clear :

Clear the file input. This method clears the preview of all non-uploaded files, clears the ajax filestack, and also clears the native file input. This method thus provides a more deeper cleaning of the fileinput as compared to the reset method. This method is automatically called when the main Remove button beside the file Browse button is clicked OR the enveloping native form RESET action is triggered (e.g. via a form RESET button)......

大概意思就是只清除 “非” 上傳文件的文件預覽,且改方法在你點擊文件預覽的清除圖標時會調用。已經發現問題所在了,由於我上面描述的場景中,文件是已經上傳了的,所以調用該方法得不到我想要的效果。

類似的方法還有 reset 方法,但是他是比 clear 更溫和的方法,無法直接清除本地文件,所以更加不能達到我要的效果。

 

解決方法:

遂查看其源碼,加斷點,慢慢debug,最終功夫不負有心人,找到了_clearPreview 里的_resetUpload 方法,搞定:

 

angular.element('#file-input').fileinput('clear')

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM