为什么从文件选择对话框中选择一次后不能立即再次选择同一文件？

Question

请考虑以下 HTML：

<input id="file" name="file" type="file"></input>
<div id="filenames"></div>

和相关的JavaScript：

window.onload = function() {
    var el = document.getElementById("file");
    el.addEventListener("change", fileSelected, false);
}
function fileSelected() {
    var gcUploadFile = document.getElementById("file").files[0];
    var filename = gcUploadFile.name || gcUploadFile.fileName;
    var fn = document.getElementById("filenames");
    var newP = document.createElement("p");
    newP.innerHTML = filename;
    fn.appendChild(newP);
}

另外，在这里找到小提琴。

现在我的问题是我似乎无法在选择一次后立即再次选择同一个文件。但是，如果我选择介于两者之间的其他文件，我可以再次选择我以前的文件。

为什么会发生这种情况，我该如何防止这种情况？

提前感谢！！

Answer 1

一种方法是在实际发生change之前，将<input>的value设置为null click事件，例如：

window.onload = function() {
    var el = document.getElementById("file");       
    el.onclick = function(){
        this.value = null;
    }        
    el.onchange = function(){
        var gcUploadFile = this.files[0];
        var filename = gcUploadFile.name || gcUploadFile.fileName;
        var fn = document.getElementById("filenames");
        var newP = document.createElement("p");
        newP.innerHTML = filename;
        fn.appendChild(newP);
    }
}

jsFiddle 在这里。