Question

好的，首先，让我解释一下，我对此进行了广泛的研究，并完全了解安全隐患。这是一个使用JavaScript，Vue和纯HTML5的客户端应用程序。

我使用隐藏的输入类型文件来获取文件对话框。

<input id="image-input" class="hidden" type="file" accept="image/*" @change="imageFileSelected">
<button type="button" title="Change Image" @click="openImage"><img src="icons/open-image.png"></button>

您可以忽略我使用Vue的事实，因为这些只是本机onclick和onchange事件。该问题通常适用于HTML5。该按钮在Firefox，Edge和Chrome中触发隐藏文件输入。但是，我注意到后两个问题，即当您选择两次相同的文件时不会触发onchange事件。

我已经看到数百万其他主题暗示值= null。该解决方案完美无缺，除了一个小的细节。 Firefox会记住您上传的最后一个文件并自动选择它，因此为Chrome和Edge添加此修复程序会破坏Firefox中所需的功能。我希望对话框记住最后一个文件的原因是因为app本身的性质。我希望用户可能想要处理其中一个文件，然后再决定重新加载同一个文件来重新开始。

openImage() {
    var el = document.getElementById('image-input');
    el.value = null;
    el.click();
},

出现同样问题的其他应用：

http://blueimp.github.io/jQuery-File-Upload/
https://rowanwins.github.io/vue-dropzone/dist/index.html
https://fineuploader.com/demos.html

似乎没有其他人知道这一点，或者只是不关心他们的对话框是否记住最后选择的文件。无论如何，有没有人知道解决这个问题的方法而不破坏我认为合适的Firefox功能？

Answer 1

我有类似的问题（我只测试Firefox和Chrome）。我希望铬能够解决这个变化问题。即使再次选择相同的文件也会发生事件。

我在处理点击事件后执行了重置为空字符串，如下所示，所以代码就像这样：

openImage() {
  var el = document.getElementById('image-input');
  el.click();
  el.value = ""; // instead of el.value = null
}.

我测试边缘浏览器。也许你可以尝试这个，并告诉它是否也适用于Edge。希望它有所帮助：）

HTML5客户端应用程序打开文件对话框

1 个答案: