Question

我们有一个文件输入元素，用于上传JSON文件，后者又提供玉石模板。但是，如果用户尝试再次上载相同的文件（带有更改），则不会触发更改事件。我们已经尝试将文件输入包装在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，尝试两次选择文件）：http://plnkr.co/edit/GDPGNZuIQHDmf8AOkgE4?p=preview

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

1 个答案: