在Bootstrap fileinput中移除預覽文件時可以通過配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 來同步刪除伺服器上的文件和記錄。但新上傳的文件則需要其他方式來同步刪除伺服器記錄。 在配置中遇到的一些問題,記錄一下 ...
在Bootstrap fileinput中移除預覽文件時可以通過配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 來同步刪除伺服器上的文件和記錄。但新上傳的文件則需要其他方式來同步刪除伺服器記錄。
在配置中遇到的一些問題,記錄一下。
fileinput在文件上傳成功後會觸發'fileuploaded'事件,移除圖片後會觸發'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) {
//在移除事件里取出所需數據,並執行相應的刪除指令 delete(($('#' + previewId).attr('fileid')); });