如何重置聚合物文件输入元素，以便能够连续再次上传相同的文件？

Question

我们有一个文件输入元素，用于上传 JSON 文件，这些文件又提供给 jade 模板。但是，如果用户尝试再次上传相同的文件（有更改），则不会触发 on-change 事件。我们已尝试将文件输入包装在 HTML 表单中并为每次上传重置表单，但这并不能解决问题。这是 HTML:

的精简版

<polymer-element name="x-application">
  <template>
    <div class='body-wrap' vertical layout flex>
      <div class='main-nav'>
        <file-input id="file" on-change="{{changeHandler}}">
          <div>Open File</div>
        </file-input>
      </div>
    </div>
  </template>
</polymer-element>

处理程序（用咖啡脚本编写）如下所示：

changeHandler: (e) ->
    reader = new FileReader()
    file = @$.file.files[0]
    reader.onload = (e) =>
         #do some stuff on load      
    reader.readAsText(file)

我们希望能够多次上传更改过的同一个文件。此外，该应用程序预计只能在 Chrome 38+.

上可靠地工作

Answer 1

在您的处理程序中，您可能需要 reset file-input:

Polymer('x-application', {
  changeHandler: function(e) {
    this.$.file.reset();
    alert('Bingo!');
  }
});

或者，含咖啡因：

changeHandler: (e) ->
  @$.file.reset()
  ...

实时预览（不包括CSS，尝试select一个文件两次）：http://plnkr.co/edit/GDPGNZuIQHDmf8AOkgE4?p=preview

如何重置聚合物文件输入元素，以便能够连续再次上传相同的文件？

How to reset polymer file-input element, to be able to upload the same file again consecutively?

file-upload

polymer

web-component