快捷導(dǎo)航

Bootstrap fileinput 上傳新文件移除時(shí)觸發(fā)服務(wù)器同步刪除的配置

更新時(shí)間：2018年10月08日 14:59:18 作者：duduyx

這篇文章主要介紹了Bootstrap fileinput 上傳新文件移除時(shí)觸發(fā)服務(wù)器同步刪除的配置 ,需要的朋友可以參考下

在Bootstrap fileinput中移除預(yù)覽文件時(shí)可以通過(guò)配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 來(lái)同步刪除服務(wù)器上的文件和記錄。但新上傳的文件則需要其他方式來(lái)同步刪除服務(wù)器記錄。

在配置中遇到的一些問(wèn)題，記錄一下。

fileinput在文件上傳成功后會(huì)觸發(fā)'fileuploaded'事件，移除圖片后會(huì)觸發(fā)'filesuccessremove'事件。

其中在fileuploaded中參數(shù)previewId是形如：preview-1538964832345-2這樣的一串字符，而在filesuccessremove里previewId是以u(píng)ploaded開(kāi)頭并且數(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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Bootstrap select多選下拉框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap select多選下拉框?qū)崿F(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下代碼
2016-12-12
JS監(jiān)聽(tīng)瀏覽器關(guān)閉、刷新及切換標(biāo)簽頁(yè)觸發(fā)事件代碼示例
瀏覽器是客戶端,客戶端的操作服務(wù)器是監(jiān)聽(tīng)不到的,所以可以用js來(lái)監(jiān)聽(tīng),js代碼監(jiān)聽(tīng)瀏覽器關(guān)閉或者刷新,這篇文章主要給大家介紹了關(guān)于JS監(jiān)聽(tīng)瀏覽器關(guān)閉、刷新及切換標(biāo)簽頁(yè)觸發(fā)事件的相關(guān)資料,需要的朋友可以參考下
2023-11-11
js控制input輸入字符解析
本篇文章主要是對(duì)js控制input輸入字符方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
從0到1學(xué)習(xí)JavaScript編寫貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript編寫貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-07-07
js點(diǎn)擊事件的執(zhí)行過(guò)程實(shí)例分析【冒泡與捕獲】
這篇文章主要介紹了js點(diǎn)擊事件的執(zhí)行過(guò)程,結(jié)合實(shí)例形式分析了js事件機(jī)制中的冒泡與捕獲相關(guān)原理、操作技巧與注意事項(xiàng),需要的朋友可以參考下
2020-04-04
javascript中的數(shù)字與字符串相加實(shí)例分析
javascript中的數(shù)字與字符串相加實(shí)例分析，學(xué)習(xí)js的朋友可以參考下。
2011-08-08
JS學(xué)習(xí)筆記之貪吃蛇小游戲demo實(shí)例詳解
這篇文章主要介紹了JS學(xué)習(xí)筆記之貪吃蛇小游戲demo,結(jié)合實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)貪吃蛇小游戲的原理、步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-05-05
js中this的用法實(shí)例分析
這篇文章主要介紹了js中this的用法,實(shí)例分析了js中this的4種常見(jiàn)用法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01
JavaScript監(jiān)聽(tīng)和禁用瀏覽器回車事件實(shí)例
這篇文章主要介紹了JavaScript監(jiān)聽(tīng)和禁用瀏覽器回車事件實(shí)例,本文直接給出示例代碼,需要的朋友可以參考下
2015-01-01
JavaScript數(shù)組操作學(xué)習(xí)之splice()函數(shù)入門與精通
這篇文章介紹了JavaScript數(shù)組操作中的splice()方法,詳細(xì)講解了其定義、語(yǔ)法和用法,并通過(guò)實(shí)例展示了如何使用該方法進(jìn)行數(shù)組元素的添加、刪除和替換,需要的朋友可以參考下
2024-11-11