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

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

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

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

在配置中遇到的一些問題，記錄一下。

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

其中在fileuploaded中參數previewId是形如：preview-1538964832345-2這樣的一串字符，而在filesuccessremove里previewId是以uploaded開頭并且數字也和fileuploaded中的不一樣，像這樣的：uploaded-1538964834797_18，但其實兩者都是指向同一個div的id。

所以上傳成功后我們只要在fileuploaded將服務器返回的數據key或者ID放入該div中，移除時在從中取出就可以了。

代碼如下：

//files為fileinput控件ID，
$('#files').on('fileuploaded', function (e, data, previewId, index) { 
　　　　　　//在上傳成功事件中將服務器返回的所需數據，添加到該文件對應的div中 
　　　　　　$('#' + previewId).attr('fileid', data.response.fileid);
  }).on('filesuccessremove', function (event, previewId, extra) {
　　　　　　//在移除事件里取出所需數據，并執(zhí)行相應的刪除指令
   delete(($('#' + previewId).attr('fileid'));
  });

總結

以上所述是小編給大家介紹的Bootstrap fileinput 上傳新文件移除時觸發(fā)服務器同步刪除的配置，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

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