HTML文件输入框不会触发fileSelect事件并警告onchange事件 - angularJS答案

【问题标题】：HTML File input box doesn't fire fileSelect event and caveat in onchange event - angularJSHTML文件输入框不会触发fileSelect事件并警告onchange事件 - angularJS
【发布时间】：2014-12-09 13:45:58
【问题描述】：

我正在使用 HTML 文件类型控件来选择和上传文件（使用 AngularJS）。我的标记如下：

<input id="uploadFile" accept=".csv" type="file" ng-file-select="model.onFileSelect($files)" onchange="angular.element(this).scope().fileNameChanged(this)">

因此，当我选择任何文件时，会触发 fileNameChanged 事件而不是 onFileSelect。到目前为止，这工作正常。但是，如果我选择要上传的相同文件，则不会触发 fileNameChanged 事件（因为我正在上传相同的文件），但我想允许用户一次又一次地上传相同的文件。 onFileSelect 事件永远不会被触发。

有什么办法可以解决这个问题？

【问题讨论】：

没有人对此进行更新吗？如果不是 AngularJS，即使使用 jQuery 也没有人遇到过类似的问题吗？

标签： javascript html angularjs file-io

【解决方案1】：

终于让它工作了，我在 HTML 中添加了这样的 onclick JS 事件：

<input id="uploadFile" onclick="myFunction();" accept=".csv" type="file" ng-file-select="model.onFileSelect($files)" onchange="angular.element(this).scope().fileNameChanged(this)">

function myFunction() {
  //setting value of null of 0th index coz in my case i allow user to upload only single file.
  //in case of multiple files, you gotta set value to null of the entire array of file list
  //returned by the control
  $('#uploadfile')[0].value = null;
  return true;
}

这样，控件将不会缓存文件名，并且下次选择相同文件时会触发 onChange 事件。

如果您仍然遇到任何问题，请告诉我。

谢谢，萨加尔

【讨论】：