Question

在javascript中我有一个输入标记，当用户点击时，他们可以从本地文件系统中选择文件。但是我无法触发事件再次加载文件。弹出打开文件对话框窗口，但如果我再次选择同一文件，则onChange事件（handleFiles）永远不会被触发。有没有办法克服这个问题？

我猜测因为文件和路径从未改变过，所以onChange事件永远不会触发。但是我确实希望它触发事件，无论它是否相同。所以基本上总是这样做。

HTML

    <li><div data-dojo-attach-event="click: openForm" data-dojo-attach-point="open" >
        <input type="file" data-dojo-attach-point="fileLoader" data-dojo-attach-event="change: handleFiles" style="display:none" />
        <img data-dojo-attach-point="openIcon" width="35" height="35" src="formsdesigner/app/editor/icons/Open.png" /></div></li>

JS函数（Dojo）

    openForm: function () {

        this.fileLoader.click();
        return false;
    },

    handleFiles: function (evt) {
        var IOC = ioController;
        console.log("got files");

        var file = evt.target.files[0];

        var reader = new FileReader();
        reader.readAsText(file);
        reader.onloadend = function (e) {
            var contents = e.target.result;
            console.log(contents);

            IOC._loadForm(contents);
        };



    },

仅供参考：不幸的是我的代码是在Dojo中，但我只想展示我如何将事件附加到我的HTML节点以及这些函数的作用。这不是Dojo特定的问题。

Answer 1

你必须在文件输入元素点击事件上执行此操作：

var fileInput = document.querySelector(".fileinput");
fileInput.addEventListener("click", function() {
    fileInput.value = null;
}

然后你可以再次选择同一个文件。

Answer 2

“文件”输入框基本上只是一个文本字段，其中包含用户计算机上文件的路径（在大多数浏览器中）。由于路径没有改变，onChange事件确实没有被触发。

建议的绑定click事件应该有效。

如何在javascript中再次打开同一个文件？

2 个答案: