javascript - HTML/Javascript 多次读取同一个文件

标签 javascript html input filereader

<分区>

我试图理解 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。当我再次尝试读取该文件时,它不会打印。即使我更改了文件的内容。但它会打印一个我加载到其中的新文件。是否可以加载同一个文件两次?

最佳答案

发生的情况是,如果您选择相同的文件,则不会为输入触发更改事件。 (我认为比较是在选定的文件名上,没有什么像大小或任何“智能”的东西)

您可以尝试在文件浏览器打开之前清除选择,因此即使选择相同的文件也会导致"new"选择

关于javascript - HTML/Javascript 多次读取同一个文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52167707/

相关文章:

javascript - 将 eventListener 附加到 Javascript 中的动态元素

javascript - Web 应用程序作为程序运行,无需浏览器

javascript - AJAX 获取跨域 HTML

javascript - 选中复选框后出现输入字段。 HTML

html - 边框在 CSS 上排列不正确

html - Blazor 中的 “The attribute names could not be inferred from bind attribute ' 绑定(bind)值 '” 异常

java - (Java) 如何将用户输入字符串拆分为多个整数和 double

javascript - 使用 Firebase Push 键作为第二次推送中的键

php - 如果其他列的输入为空,则更新数据库中的一行,同时保留其他列中的先前数据

javascript - windows.location.href 不起作用