在上一篇文章中，主要介紹了file input插件的初始化和多文件同步上傳到服務器的相關配置等。這篇主要介紹file input插件的編輯等。

使用場景：

在后臺管理框架中，一條數據中包含不固定的多張圖片屬性，然后需要同其他數據一起做增刪改查。多文件同時新增上一篇已經做過了，需要的請點擊打開鏈接，但是編輯的時候，就需要吧原來上傳的圖片展示出來，然后可以進行刪除和重新上傳，，這就是我現在要做的功能。

直接上代碼吧。。

1.HTML

?

[html]?view plain?copy

<form>??

?????.......//其他數據??

?????<div?class="form-group"?style="width:99%">??

?????????<input?id="update_bachPic"?name="commoPicArr"?type="file"?multiple?>??

?????</div>??

</form>??

?

2.JS代碼?當點擊數據的編輯按鈕，則通過后臺返回的數據初始化編輯頁面，并初始化文件上傳插件。

?

[javascript]?view plain?copy

$("#update_bachPic").fileinput({??

????????language:?'zh',????????????????????????????????????????//語言??

????????uploadUrl:'<%=basePath%>/commodity/addCommodityPic',???//上傳地址??

????????showPreview:?true,??????????????//展前預覽??

????????showUpload:?false,??????????????//顯示上傳按鈕??

????????showCaption:?false,?????????????//顯示文字表述??

????????uploadAsync:false,?????????????????????????????//false?同步上傳，后臺用數組接收，true?異步上傳，每次上傳一個file,會調用多次接口??

????????removeFromPreviewOnError:true,?//當選擇的文件不符合規則時，例如不是指定后綴文件、大小超出配置等，選擇的文件不會出現在預覽框中，只會顯示錯誤信息??

????????maxFileCount:?5,??

????????maxFileSize:?1024*10,???????????//單位為kb，如果為0表示不限制文件大小??

????????allowedFileExtensions:?["jpg",?"jpeg",?"gif",?"png","bmp"],??

??????????????????????????????????

????????previewFileIcon:?"<i?class='glyphicon?glyphicon-king'></i>",??

????????overwriteInitial:?false,??

????????initialPreviewAsData:?true,??

????????initialPreview:?[????????//這里配置需要初始展示的圖片連接數組，字符串類型的，通常是通過后臺獲取后然后組裝成數組直接賦給initialPreview就行了??

????????????????????????"http://......img",??

????????????????????????"http://......img",??

????????????????????????],??

????????initialPreviewConfig:?[?//配置預覽中的一些參數???

????????????????????????????????{caption:?"transport-1.jpg",?size:?329892,?width:?"120px",?url:?"deletePic",?key:?1},??

????????????????????????????????{caption:?"transport-2.jpg",?size:?872378,?width:?"120px",?url:?"deletePic",?key:?2}??

??????????????????????????????]??

????????}).on('filepredelete',?function(event,?key,?jqXHR,?data)?{??

????????????????????console.log('Key?=?'?+?key);??

????????????????????console.log(jqXHR);??

????????????????????console.log(data);???

????????});??

注意：
配置initialPreview:[ ] 配置的是數組，也就是需要初始展示圖片的地址數組，字符串類型，當然通常是通過ajax從后臺獲取到鏈接后再組裝成數組直接賦給他就行了。
配置initialPreviewConfig:[ ]也是一個數組,他主要是配置預覽圖片的相關顯示參數，名字啊、大小啊。但是最重要的配置是url，他是你在點擊圖中的刪除按鈕后，會調用的地址，然后通過ajax去后臺刪除原圖片。配置key，表示刪除的時候向后臺傳遞的參數，看圖：

?

?

? ? ? ?很神奇，你會發現，在url中我只配置了deletePic，但是通過調試發現，刪除請求的url竟然自動拼接了前面的一段url，我猜測可能是從上面的配置updateUrl而來，或者是從請求頭中的Referer而來。

? ? ? ? 配置的key是請求傳遞的參數，實測發現名字key不能改成自己的其他名字，而且傳遞的值不能是對象，這就有個問題了，萬一我想傳多個值怎么辦？那就自己動手豐衣足食，改造源碼吧。。

?

?3.更改fileinput.js源碼

??需求一：將key傳遞的參數改為：?key: "{'id':'1','name':'name1'}"
? 注意：既然直接傳遞對象不行，那就傳遞json字符串吧，然后在源碼中轉換成json不就行了？

? ? ? ?更改源碼中2379行左右，當點擊刪除按鈕時，會調用settings,里面就是已經配置好的參數，我們獲取key值，然后將單引號替換成雙引號，然后轉換為json對象，替換data參數。

? ? ? ?這里為什么要替換單引號為雙引號，為什么不直接在key配置的時候就寫雙引號呢？別問，我試了，不行，轉換會出錯，要不就是傳遞不過來，不然我也不會使用這個多此一舉的辦法啊。。。你直接傳遞json字符串到后臺，用后臺代碼解析為json也可以。。然后我們的調試請求發現傳遞的值就變成我們想要的了。。

? ? ? ?好，傳值的問題解決了。就可以點擊按鈕的時候去后臺刪除此圖片了，并傳遞我們其他的參數。新選擇的圖片并不會調用后臺方法，會直接刪除的。

?

? 需求二：當用戶點擊刪除按鈕的時候，提示他這是原圖片，并問他是否確認刪除，確認后才去后臺調用刪除，取消則不刪除。這是為了避免用戶點錯，而導致刪除了原圖片，那么久需要在后臺調用ajax之前執行一段我們的提示代碼。

?解決：查看API，發現了這么幾個事件可以調用。
? ? $('#input-id').on('filepreremove', function(event, id, index) { ? ? ? //只是你刪除重新選擇的圖片才會觸發，而刪除原圖片不會觸發。
? ? ? ?console.log('id = ' + id + ', index = ' + index);
? ? });

? ?$('#input-id').on('filepredelete', function(event, key, jqXHR, data) { ?//就是在刪除原圖片之前觸發，而新選擇的圖片不會觸發。能滿足我們的要求。
? ? ? console.log('Key = ' + key);
? ?});

?

??解決一：

? ??采用filepredelete時間監聽，在刪除之前詢問用戶是否確定，并在確定后執行后面的。如果采用一般bootstrap的詢問框，都是采用回調的方式監聽用戶操作的，還沒等回調結束，后面的代碼就已經開始調用ajax執行刪除了。所以需要一個js線程的暫停機制，類似于alert，當用戶操作后再往下執行，原始的js confirm()方法可以實現詢問，然后點擊確定則繼續執行，所以代碼改為：

?

[javascript]?view plain?copy

$("#update_bachPic").fileinput({??

????????language:?'zh',??

????????uploadUrl:'<%=basePath%>/commodity/addCommodityPic',??

????????showPreview:?true,??????????????//展前預覽??

????????showUpload:?false,??????????????//顯示上傳按鈕??

????????showCaption:?false,?????????????//顯示文字表述??

????????uploadAsync:false,??

????????removeFromPreviewOnError:true,??

????????maxFileCount:?5,??

????????maxFileSize:?1024*10,???????????//單位為kb，如果為0表示不限制文件大小??

????????allowedFileExtensions:?["jpg",?"jpeg",?"gif",?"png","bmp"],??

????????previewFileIcon:?"<i?class='glyphicon?glyphicon-king'></i>",??

????????overwriteInitial:?false,??

????????initialPreviewAsData:?true,??

????????initialPreview:?urlArr,??

????????initialPreviewConfig:?[??

????????????????????????????{caption:?"transport-1.jpg",?size:?329892,?width:?"120px",?url:?"deletePic",?key:?"{'id':'1','name':'name1'}"},??

????????????????????????????{caption:?"transport-2.jpg",?size:?872378,?width:?"120px",?url:?"deletePic",?key:?"{'id':'1','name':'name1'}"},??

????????????????????????????]??

????????}).on('filepredelete',?function(event,?key,?jqXHR,?data)?{??

????????????????if(!confirm("確定刪除原文件？刪除后不可恢復")){??

????????????????????return?false;??

????????????????}??

????????});??

?

當用戶點擊取消，則返回false,到源碼中去阻止事件的繼續執行。

?

在源碼2323行左右，執行ajax方法中beforSend，我們在filepredelete中返回false，返回false則再return給beforSend，他就會停止執行ajax方法，從而達到我們的目的。

這種方法確實能實現我們的要求，但是使用原始的confirm難免有些難看，也不符合整個系統的UI。但是使用bootstrap其他的詢問框，則沒辦法實現線程暫停機制。但是我們可以在他執行ajax之前去判斷，從而阻止執行。

?解決二：

? 更改源碼2379行左右，當點擊刪除按鈕時，調用$.ajax（setting）方法之前采用其他bootstrap詢問插件來監聽，當然你也可以把他封裝成一個內部事件，在初始化fileinput的時候去監聽，

?

好了，這就是一些簡單的刪除原文件的方法，其中不乏需要我們去更改源碼來符合我們的需求。后面使用中還遇到什么問題，再來研究吧。

?

原文鏈接：http://blog.csdn.net/qing_gee/article/details/48949701

總結

以上是生活随笔為你收集整理的bootstrap File Input 多文件上传插件使用记录（二）删除原文件的全部內容，希望文章能夠幫你解決所遇到的問題。

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