bootstrap File Input 多文件上传插件使用记录（二）删除原文件
在上一篇文章中，主要介紹了file input插件的初始化和多文件同步上傳到服務器的相關配置等。這篇主要介紹file input插件的編輯等。
使用場景：
在后臺管理框架中，一條數據中包含不固定的多張圖片屬性，然后需要同其他數據一起做增刪改查。多文件同時新增上一篇已經做過了，需要的請點擊打開鏈接，但是編輯的時候，就需要吧原來上傳的圖片展示出來，然后可以進行刪除和重新上傳，，這就是我現在要做的功能。
直接上代碼吧。。
1.HTML
?
[html]?view plain?copy?
2.JS代碼?當點擊數據的編輯按鈕，則通過后臺返回的數據初始化編輯頁面，并初始化文件上傳插件。
?
[javascript]?view plain?copy注意：
配置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?
當用戶點擊取消，則返回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 多文件上传插件使用记录（二）删除原文件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 机构：OLED面板在智能手机市场渗透率将
- 下一篇： 网络工程师成长日记370-阿尔斯通