Bootstrap fileinput削除コールバックイベント処理

4290 ワード

公式サイトに成功したイベントをアップロードし、アップロードに成功した後の削除イベントAPIはこのようなものですhttp://plugins.krajee.com/file-input#events
$('#input-id').on('fileuploaded', function(event, data, previewId, index) {
    var form = data.form, files = data.files, extra = data.extra,
        response = data.response, reader = data.reader;
    console.log('File uploaded triggered');
});
$('#input-id').on('filesuccessremove', function(event, id) {
    if (some_processing_function(id)) {
       console.log('Uploaded thumbnail successfully removed');
    } else {
        return false; // abort the thumbnail removal
    }
});

ここには2つの削除イベントがあります注意してください1.filedeleteイベント:プレビュー時にサムネイル上の削除ボタンをクリックしてトリガーすることができます2.filesuccessremoveイベント:画像のアップロードに成功したら、削除ボタンのコールバック関数をクリックします
くだらないことを言わないコードは以下の通りです.
var List = new Array();//               id
$("#txtfile").on("fileuploaded", function (event, data, previewId, index) {
    var data = data.response.FileName;  //            ,         
    List.push({ FileName: data, KeyID: previewId })
});
$("#txtfile").on("filesuccessremove", function (event, data, previewId, index) { 
    for (var i = 0; i < List.length; i++) { 
      if (List[i].KeyID== data) { 
        delete List[i]; 
      } 
   }
});

最も重要なのはfileinput.jsの中の何行のコードを遮蔽してOKになりました(前回のピクチャーがアップロードしていないため再び修正しました)这里写图片描述
uploadイベントによって生成される配列は、次の这里写图片描述です.
removeイベント削除ピクチャは、idに基づいて这里写图片描述を削除することができる.