FileUpload復制文件

Question

我正在做一個簡單的測試，只是嘗試上傳一個文件，將其轉換為未簽名的8數組，然后將其記錄在控制台上

我的代碼運行完美，但是每次我按按鈕上載文件時，控制台都會逐步重復輸出，讓我解釋一下：

第一次單擊時，控制台顯示1個輸出

在第二次單擊上，控制台顯示重復的2個輸出

在第三次單擊控制台上，重復顯示3個輸出

等等...

您能幫我發現錯誤嗎？ 我的代碼是：

<button type="button" class="btn btn-primary" id="bid_uploadPicture">Subir Imagen</button>
<input type="file" id="file" style="display:none;" />

jQuery(function ($) {

    $("#bid_uploadPicture").click(function () {
        event.preventDefault();
        document.getElementById("file").click();

        var fr = new FileReader();
        $("#file").change(function () {
            fr.onload = imageIsLoaded;
            fr.readAsArrayBuffer(this.files[0]);
        });
    });
});

function imageIsLoaded(e) {
    data = new Uint8Array(e.target.result)
    console.log(e.target.result);
}

Answer 1

每次您單擊按鈕時，都將附加一個新的.change事件。 這意味着他們加起來； 兩次單擊=兩個偵聽器正在等待文件更改。

只要將.change外部事件.click類似事件這樣小提琴 ：

jQuery(function($) {

  $("#bid_uploadPicture").click(function() {
    event.preventDefault();
    document.getElementById("file").click();
  });

  var fr = new FileReader();
  $("#file").change(function() {
    fr.onload = imageIsLoaded;
    fr.readAsArrayBuffer(this.files[0]);
  });
});

function imageIsLoaded(e) {
  data = new Uint8Array(e.target.result)
  console.log(e.target.result);
}