【发布时间】：2019-02-09 13:41:54
【问题描述】：
我试图理解 Javascript 中的文件 I/O，这让我很困惑。我有一个文件输入，它从磁盘加载文件，然后我使用阅读器来获取内容。但是当我重复这个过程时，文件不会第二次或第三次读取。 这是代码：
<html>
<head>
</head>
<body>
<input type="file" id="myFile">
<script type="text/javascript">
window.onload = function() {
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function() {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener('load', function(e) {
console.log(e.target.result);
});
reader.readAsText(myFile);
}
});
}
</script>
</body>
</html>当我第一次读取文件时，console.log 打印 e.target.result。当我再次尝试读取文件时，它不会打印。即使我更改了文件的内容。但它会打印一个我加载到其中的新文件。同一个文件可以加载两次吗？
【问题讨论】：
-
尝试将事件类型从“更改”更改为“输入”。顺便说一句，你在 Firefox 中的作品。你用的是什么浏览器？
-
感谢您的建议！我确实让它与下面的答案一起使用，但我使用的是 chrome。我看到的每个示例都使用了更改，因此我不确定该回调到底做了什么。我假设它检查名称更改？但我也会将其更改为输入。我觉得这样更方便。
-
是的，假设将您已有的内容与您选择的内容进行比较，如果不同则触发事件。然而，较新的（即 IE 不支持）“输入”事件将（或应该）触发任何选择。
标签： javascript html input filereader