javascript - Ember js - 文件上传组件 - 在第二次尝试上传同一文件时强制触发更改事件

Question

我正在使用Ember Uploader组件允许用户上传 .txt 文件。

此文件必须以非常特定的方式格式化，如果文件格式不正确，则无法上传。

该组件首先对更改事件使用react，监视是否选择了新文件。

这会将属性'files'设置为所选文件，从而导致函数filesDidChange运行。

在filesDidChange中，读取文件并检查格式错误。如果发现错误，它会告诉用户更新文件并重试。

第一次尝试一切都很完美。问题是，当您尝试重新上传编辑后的文件时，组件不会将其识别为更改事件 - alert("Hello World") 不会触发。

我认为这是因为选择了相同的文件。

我尝试在 filesDidChange 函数末尾将 'files' 设置为 null，但这没有效果。这是有道理的，因为更改事件监视的是元素，而不是属性。

即使在第二次尝试时选择上传相同的文件，如何才能触发更改事件？

change: function(e) {
    alert("Hello World");
    var input = e.target;
    var selectedFiles = input.files;
    if (selectedFiles) {
      this.set('files', selectedFiles);
    }
  },

filesDidChange: function(files) {
    //Reads the text file using the FileReader API.
    //Checks that the file is correcty formatted.
    //Prevents the upload and displays an error message if the file format is wrong.
    //Asks the user to fix the errors and try to upload the same file again.
}.observes('files'),

Answer 1

我找到了一个可行的解决方案:

第 1 步是将输入元素包装在它自己的表单元素中。理想情况下，表单包装器应具有唯一的 ID。

<form id='file-upload'>
  <input type='file' />
</form>

然后您可以使用 jQuery 重置该表单:

Ember.$("#single-upload")[0].reset();

文件输入的值变为空，因此可以再次上传相同的文件。