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

【问题标题】：Re-select and upload the same file重新选择并上传相同的文件
【发布时间】：2017-06-08 15:06:56
【问题描述】：

您无法重新选择并上传相同的文件，除非在 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，然后再次单击文件选择器，将出现文件选择对话框并尝试选择相同的文件再次文件 -- 浏览器什么也不做，也不会出现警告框。

【问题讨论】：

介意解释一下您想要更好地解决的问题吗？我不知道你想达到什么目的。
你确定吗？我也在 Chrome 和 IE 上收到更改事件。 AFAIK 文件输入'.onchange 几乎适用于任何浏览器。
我需要解释一下：你不能重新选择/重新上传同一个文件，即如果你选择了一个文件，你就不能再次选择它——它什么都不做。
在我看来，“上传同一个文件”意味着您提交/发送同一个文件两次。在您的情况下，您是在提交之前选择它。
本题没有问题。

标签： javascript html file-upload

【解决方案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 = '';
    }-*/;

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

"这不是 FF 中文件输入的默认行为。" 但它是 Chrome & Opera 中的默认行为。 “我想如果你有一些用于上传的句柄或回调，那么你应该清除其中的文件输入。”我想知道我该怎么做。你介意提供一个例子/sn-p吗？
@Sanjeev OP 想知道是否有更简洁的问题需要解决。您在他的方法中提到了问题，但没有提到解决方案。请为此使用 cmets，因为我不认为这是一个答案
@Hermes : 你没有提到你是如何提交或上传文件的，它是一个多部分表单提交(enctype="multipart/form-data")？
@blunderboy：我同意我不应该把这个作为答案，我的错。
假设是这样一个简单的文件读取过程：demo.

【解决方案3】：

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

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

【讨论】：

stackoverflow 上的礼仪是只解释代码的答案。
我的英语不好。对不起:(