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

Question

当我 select 第一次说 hello.png 时，它加载它并调用 handleFileSelect() 函数。但是，如果我再次选择同一个文件，则在我选择另一个文件名之前不会调用该函数。我怎样才能强制它调用函数？我以为修改会在 'change' 上进行，但不确定那是什么事件。

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>

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

Force angular.element .on 'change' to call specified function on the same file

events

document

jquery-selectors

angularjs