1. 程式人生 > >重置 bootstrap-fileinput

重置 bootstrap-fileinput

click images 文件 res ati stack more upload gin

最近在使用 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‘)

重置 bootstrap-fileinput