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

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);
}

此外，查找 the fiddle here .

现在我的麻烦是我似乎无法在选择一次后立即再次选择同一文件。但是，如果我在中间选择其他文件，我可以再次选择之前的文件。

为什么会发生这种情况以及如何防止这种情况发生？

提前致谢!!

Answer 1

实现此目的的一种方法是设置 value <input>的至null关于click事件，在 change 之前实际发生的情况，例如:

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 here.