Bootstrap fileinput 上傳新文件移除時(shí)觸發(fā)服務(wù)器同步刪除的配置
在Bootstrap fileinput中移除預(yù)覽文件時(shí)可以通過配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 來同步刪除服務(wù)器上的文件和記錄。但新上傳的文件則需要其他方式來同步刪除服務(wù)器記錄。
在配置中遇到的一些問題，記錄一下。
fileinput在文件上傳成功后會(huì)觸發(fā)'fileuploaded'事件，移除圖片后會(huì)觸發(fā)'filesuccessremove'事件。
其中在fileuploaded中參數(shù)previewId是形如：preview-1538964832345-2這樣的一串字符，而在filesuccessremove里previewId是以u(píng)ploaded開頭并且數(shù)字也和fileuploaded中的不一樣，像這樣的：uploaded-1538964834797_18，但其實(shí)兩者都是指向同一個(gè)div的id。
所以上傳成功后我們只要在fileuploaded將服務(wù)器返回的數(shù)據(jù)key或者ID放入該div中，移除時(shí)在從中取出就可以了。
代碼如下：
//files為fileinput控件ID，
$('#files').on('fileuploaded', function (e, data, previewId, index) {
//在上傳成功事件中將服務(wù)器返回的所需數(shù)據(jù)，添加到該文件對(duì)應(yīng)的div中
$('#' + previewId).attr('fileid', data.response.fileid);
}).on('filesuccessremove', function (event, previewId, extra) {
//在移除事件里取出所需數(shù)據(jù)，并執(zhí)行相應(yīng)的刪除指令
delete(($('#' + previewId).attr('fileid'));
});
總結(jié)
以上所述是小編給大家介紹的Bootstrap fileinput 上傳新文件移除時(shí)觸發(fā)服務(wù)器同步刪除的配置 ，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- Bootstrap Fileinput文件上傳組件用法詳解
- JS文件上傳神器bootstrap fileinput詳解
- Bootstrap fileinput文件上傳預(yù)覽插件使用詳解
- Bootstrap中的fileinput 多圖片上傳及編輯功能
- Bootstrap的fileinput插件實(shí)現(xiàn)多文件上傳的方法
- bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳
- 基于bootstrap的上傳插件fileinput實(shí)現(xiàn)ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽)
- 詳解bootstrap-fileinput文件上傳控件的親身實(shí)踐
- BootStrap fileinput.js文件上傳組件實(shí)例代碼
- Bootstrap FileInput實(shí)現(xiàn)圖片上傳功能
相關(guān)文章
BootStrap下拉菜單和滾動(dòng)監(jiān)聽插件實(shí)現(xiàn)代碼
這篇文章主要介紹了BootStrap下拉菜單和滾動(dòng)監(jiān)聽插件實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
理解返回函數(shù)的JavaScript函數(shù)是什么意思，通過幾個(gè)簡(jiǎn)短的例子真正理解返回函數(shù)的JavaScript函數(shù)到底是什么？感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要為大家詳細(xì)介紹了js移動(dòng)端圖片壓縮上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要為大家詳細(xì)介紹了JavaScript職責(zé)鏈模式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
console.log()與console.dir()的區(qū)別及說明
這篇文章主要介紹了console.log()與console.dir()的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
詳解JavaScript中的強(qiáng)制類型轉(zhuǎn)換和自動(dòng)類型轉(zhuǎn)換
這篇文章中我們將深入探索一下 JavaScript 中的類型轉(zhuǎn)換,揭示強(qiáng)制類型轉(zhuǎn)換、自動(dòng)類型轉(zhuǎn)換和轉(zhuǎn)換函數(shù)的奧秘,快跟隨小編一起學(xué)習(xí)一下吧2023-12-12
這篇文章主要為大家介紹了GoJs中使用HTML方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
uniapp小視頻項(xiàng)目開發(fā)之滑動(dòng)播放視頻
最近在工作中遇到了一個(gè)視頻播放的需求,所以下面這篇文章主要給大家介紹了關(guān)于uniapp小視頻項(xiàng)目開發(fā)之滑動(dòng)播放視頻的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了js編寫的treeview使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了js如何給json對(duì)象添加、刪除、修改屬性問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10