Question

你不能重新选择和上传同一个文件，除了在Firefox中，错误地允许你这样做：

<input type="file" id="fileChooser">
document.getElementById('fileChooser').onchange = function () {
    alert('Uploaded!');
};

以下是我解决问题的方法。我想知道是否有更简洁的方法来实现它。

<input type="file" id="fileChooser">
var fileChooser = document.getElementById('fileChooser');
fileChooser.onclick = function () {
    this.value = '';
};
fileChooser.onchange = function () {
    if (this.value) {
        alert('Uploaded!');
    }
};

在JSFiddle上：http://jsfiddle.net/scMF6/2/

说明：

您无法连续两次重新选择同一文件，例如，您在桌面上选择并上传foo.txt，然后再次单击文件选择器，出现文件选择对话框并尝试选择同样的文件 - 浏览器什么都不做，没有出现警告框。

Answer 1

谢谢你的想法！如果有人使用GWT，那么你可以使用这个代码）

     ...//some code :)
     Event.setEventListener(btn, new EventListener() {    
           @Override
           public void onBrowserEvent(Event event) {
           //work with IE11+ and other modern browsers
           nativeClearFile(fileUpload.getElement());
           //throw event click 
           InputElement.as(fileUpload.getElement()).click();
           }
          });
    Event.sinkEvents(btn, Event.ONCLICK);
    ...//continue code :)

    private native void nativeClearFile(Element element) /*-{
        element.value = '';
    }-*/;

Answer 2

您的解决方案有一个问题，在您第二次单击它清除文件输入时选择文件后。现在，如果用户没有选择新文件并取消浏览弹出，那么他的旧选择就会消失。

这不是FF中文件输入的默认行为。

我想如果你有一些句柄或回调上传，那么你应该清除你的文件输入。

Answer 3

您必须在“点击事件”后初始化“更改事件”：

 var fileChooser = document.getElementById('fileChooser');
    fileChooser.onclick = function () {
        this.value = '';
        fileChooser.onchange = function () {
            if (this.value) {
                alert('Uploaded!');
            }
        };
    };

重新选择并上传相同的文件

3 个答案: