javascript - onclick 输入文件，仅触发一次 onChange 事件

Question

我的代码有问题。 当调用“simulateClickBtn”时，系统会弹出一个选择文件的窗口。 选择文件后，我们将进入回调，并且 sendMessage 函数完成。 但它只在第一次有效。其他时候，我从不进行更改回调..

HTML:

<input type="file" id="hiddenInput" name="somename" size="chars">

JS:

this.simulateClickBtn = function simulateClickBtn() {
  localFileChoose = undefined ;

  $('#hiddenInput').click();

  $('#hiddenInput').off().on("change", function(evt){
    chrome.runtime.sendMessage({
      message : "SHOW_UPLOAD_TYPE_VIEW",
      fileName: evt.target.files[0].name,
    }, function(response) { });

    localFileChoose = evt.target.files[0];
  });
};

Answer 1

因此，您可能不希望在模拟单击处理程序中绑定(bind)隐藏的单击处理程序。每次单击时都会重新绑定(bind)它，这是不必要的。尝试这样的事情:

var chosenFile;

this.simulateClickBtn = function simulateClickBtn() {
  $('#hiddenInput').click();
};

$('#hiddenInput').on('change', function(evt) {
  chrome.runtime.sendMessage({
    message : 'SHOW_UPLOAD_TYPE_VIEW',
    fileName: evt.target.files[0].name,
  }, function(response) { });

  chosenFile = evt.target.files[0];
});