强制 angular.element .on 'change' 调用同一文件上的指定函数

Question

当我第一次选择 say hello.png 时，它会加载它并调用 handleFileSelect() 函数。但是，如果我再次选择同一个文件，则在我选择另一个文件名之前不会调用该函数。如何强制它调用该函数？我在想修改将在“更改”上进行，但不确定那会是什么事件。

var handleFileSelect = function(evt) {
  debugger;
  var file = evt.currentTarget.files[0];
  var reader = new FileReader();
  reader.onload = function (evt) {
    $scope.$apply(function($scope){
      $scope.myImage = evt.target.result;
    });
  };
  reader.readAsDataURL(file);
};

angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);

Answer 1

我能想到的最好的方法是用按钮替换文件输入，并在按下按钮时动态创建输入。

function handleFileSelect(evt) {
  alert('Filename: ' + evt.target.files[0].name);
}

var button = document.getElementById('select-file');
button.addEventListener('click', function() {
  var input = document.createElement('input');
  input.type = 'file';
  input.addEventListener('change', handleFileSelect);
  input.click();
});

<button id="select-file">Select File</button>