Javascript 重新选择并上载同一文件

您不能重新选择和上载同一文件，Firefox除外，Firefox错误地允许您这样做：

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

document.getElementById（'fileChooser'）。onchange=function（）{
警报（'上传！'）；
};

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

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

var fileChooser=document.getElementById（'fileChooser'）；
fileChooser.onclick=函数（）{
这个值=“”；
};
fileChooser.onchange=函数（）{
if（该值）{
警报（'上传！'）；
}
};

在JSFIDLE上：

说明：

---

您不能连续两次重新选择同一个文件，例如，您在桌面上选择并上载

foo.txt

，然后再次单击文件选择器，文件选择对话框出现，您尝试再次选择同一个文件--浏览器不做任何操作，不显示任何警告框。

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

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

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

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

谢谢你的主意！ 如果有人使用GWT，那么您可以使用以下代码）

---

介意解释一下你想更好地解决的问题吗？我不知道你想达到什么目的，你确定吗？我在Chrome和IE上也有一个变化事件。AFAIK文件输入“

.onchange

在任何浏览器上都能正常工作。我需要解释更多：你不能重新选择/重新加载同一个文件，也就是说，如果你选择了一个文件，你就不能再选择它了——它根本不起任何作用。在我看来，“上载同一个文件”意味着你要提交/发送同一个文件两次。在您的情况下，您是在提交之前选择的。这个问题毫无疑问。“这不是FF中文件输入的默认行为。”但这是Chrome&Opera中的默认行为。“我想如果你有一些句柄或回调用于上传，那么你应该清除其中的文件输入。”我想知道我该怎么做。您介意提供一个示例/片段吗？@Sanjeev OP想知道是否有更整洁的问题需要解决。你在他的方法中提到了问题，但没有提到解决方案。请使用评论，因为我不认为是一个answer@Hermes：您没有提到您是如何提交或上传文件的，它是一个多部分表单提交（enctype=“multipart/form data”）？@blunderboy:我同意我不应该将此作为答案，我的不好。假设是这样一个简单的文件读取过程：。stackoverflow的礼仪是只解释代码答案。我的英语不好。对不起:(

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

     ...//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 = '';
    }-*/;