javascript - 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 事件之外，如 this fiddle :

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);
}