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

使用場(chǎng)景：

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

直接上代碼吧。。

1.HTML

?

[html]?view plain?copy

<form>??

?????.......//其他數(shù)據(jù)??

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

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

?????</div>??

</form>??

?

2.JS代碼?當(dāng)點(diǎn)擊數(shù)據(jù)的編輯按鈕，則通過后臺(tái)返回的數(shù)據(jù)初始化編輯頁面，并初始化文件上傳插件。

?

[javascript]?view plain?copy

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

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

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

????????showPreview:?true,??????????????//展前預(yù)覽??

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

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

????????uploadAsync:false,?????????????????????????????//false?同步上傳，后臺(tái)用數(shù)組接收，true?異步上傳，每次上傳一個(gè)file,會(huì)調(diào)用多次接口??

????????removeFromPreviewOnError:true,?//當(dāng)選擇的文件不符合規(guī)則時(shí)，例如不是指定后綴文件、大小超出配置等，選擇的文件不會(huì)出現(xiàn)在預(yù)覽框中，只會(huì)顯示錯(cuò)誤信息??

????????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:?[????????//這里配置需要初始展示的圖片連接數(shù)組，字符串類型的，通常是通過后臺(tái)獲取后然后組裝成數(shù)組直接賦給initialPreview就行了??

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

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

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

????????initialPreviewConfig:?[?//配置預(yù)覽中的一些參數(shù)???

????????????????????????????????{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:[ ] 配置的是數(shù)組，也就是需要初始展示圖片的地址數(shù)組，字符串類型，當(dāng)然通常是通過ajax從后臺(tái)獲取到鏈接后再組裝成數(shù)組直接賦給他就行了。
配置initialPreviewConfig:[ ]也是一個(gè)數(shù)組,他主要是配置預(yù)覽圖片的相關(guān)顯示參數(shù)，名字啊、大小啊。但是最重要的配置是url，他是你在點(diǎn)擊圖中的刪除按鈕后，會(huì)調(diào)用的地址，然后通過ajax去后臺(tái)刪除原圖片。配置key，表示刪除的時(shí)候向后臺(tái)傳遞的參數(shù)，看圖：

?

?

? ? ? ?很神奇，你會(huì)發(fā)現(xiàn)，在url中我只配置了deletePic，但是通過調(diào)試發(fā)現(xiàn)，刪除請(qǐng)求的url竟然自動(dòng)拼接了前面的一段url，我猜測(cè)可能是從上面的配置updateUrl而來，或者是從請(qǐng)求頭中的Referer而來。

? ? ? ? 配置的key是請(qǐng)求傳遞的參數(shù)，實(shí)測(cè)發(fā)現(xiàn)名字key不能改成自己的其他名字，而且傳遞的值不能是對(duì)象，這就有個(gè)問題了，萬一我想傳多個(gè)值怎么辦？那就自己動(dòng)手豐衣足食，改造源碼吧。。

?

?3.更改fileinput.js源碼

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

? ? ? ?更改源碼中2379行左右，當(dāng)點(diǎn)擊刪除按鈕時(shí)，會(huì)調(diào)用settings,里面就是已經(jīng)配置好的參數(shù)，我們獲取key值，然后將單引號(hào)替換成雙引號(hào)，然后轉(zhuǎn)換為json對(duì)象，替換data參數(shù)。

? ? ? ?這里為什么要替換單引號(hào)為雙引號(hào)，為什么不直接在key配置的時(shí)候就寫雙引號(hào)呢？別問，我試了，不行，轉(zhuǎn)換會(huì)出錯(cuò)，要不就是傳遞不過來，不然我也不會(huì)使用這個(gè)多此一舉的辦法啊。。。你直接傳遞json字符串到后臺(tái)，用后臺(tái)代碼解析為json也可以。。然后我們的調(diào)試請(qǐng)求發(fā)現(xiàn)傳遞的值就變成我們想要的了。。

? ? ? ?好，傳值的問題解決了。就可以點(diǎn)擊按鈕的時(shí)候去后臺(tái)刪除此圖片了，并傳遞我們其他的參數(shù)。新選擇的圖片并不會(huì)調(diào)用后臺(tái)方法，會(huì)直接刪除的。

?

? 需求二：當(dāng)用戶點(diǎn)擊刪除按鈕的時(shí)候，提示他這是原圖片，并問他是否確認(rèn)刪除，確認(rèn)后才去后臺(tái)調(diào)用刪除，取消則不刪除。這是為了避免用戶點(diǎn)錯(cuò)，而導(dǎo)致刪除了原圖片，那么久需要在后臺(tái)調(diào)用ajax之前執(zhí)行一段我們的提示代碼。

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

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

?

??解決一：

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

?

[javascript]?view plain?copy

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

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

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

????????showPreview:?true,??????????????//展前預(yù)覽??

????????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("確定刪除原文件？刪除后不可恢復(fù)")){??

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

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

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

?

當(dāng)用戶點(diǎn)擊取消，則返回false,到源碼中去阻止事件的繼續(xù)執(zhí)行。

?

在源碼2323行左右，執(zhí)行ajax方法中beforSend，我們?cè)趂ilepredelete中返回false，返回false則再return給beforSend，他就會(huì)停止執(zhí)行ajax方法，從而達(dá)到我們的目的。

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

?解決二：

? 更改源碼2379行左右，當(dāng)點(diǎn)擊刪除按鈕時(shí)，調(diào)用$.ajax（setting）方法之前采用其他bootstrap詢問插件來監(jiān)聽，當(dāng)然你也可以把他封裝成一個(gè)內(nèi)部事件，在初始化fileinput的時(shí)候去監(jiān)聽，

?

好了，這就是一些簡(jiǎn)單的刪除原文件的方法，其中不乏需要我們?nèi)ジ脑创a來符合我們的需求。后面使用中還遇到什么問題，再來研究吧。

?

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。