Question

我想要阅读并输出一个文本文件。 Chrome控制台抱怨：

caught TypeError: Cannot read property '0' of undefined FinanceDashBoard.html:22“

不确定我做错了什么？

代码如下：

<html>
    <head>
       <title>Read File (via User Input selection)</title>
    </head>
<body>
    <main>
      <label>Load a text database file: <input type="file" id="txtfile" ></label>
    </main>

  <script type="text/javascript">

  var dbFileElm = document.getElementById('txtfile');

  dbFileElm.onchange =  function() {
    var filePath = dbFileElm.files[0];
    var reader = new FileReader();
    var output = ""; //placeholder for text output
    reader.onload = function (e) {
      output = e.target.result;
      displayContents(output);
      }
    reader.readAsText(filePath.files[0]);
  }   

  // Ignore code below it doesn't work yet.
  function displayContents(txt) {
    var el = document.getElementById('main'); 
    el.innerHTML = txt; //display output in DOM
  }

  </script>
 </body>
</html>

Answer 1

两个错误。

1）更改此行：

reader.readAsText(filePath.files[0]);

到此：

reader.readAsText(filePath);

因为filePath已经是：dbFileElm.files[0];

2）main标记没有ID，因此按ID main获取元素将无效。 只需将其编辑为：

<main id="main">

Answer 2

您没有id="main"

的元素

尝试类似......

<main id="main"> ...

或者，如果您正在尝试填充文本框...

var el = document.getElementById('txtfile');

Answer 3

这篇文章回答了问题

HTML input file selection event not firing upon selecting the same file

如果您将输入值设置为null，则对我有用

dbFileElm.onChange =  function() {
    this.value = null;
    var filePath = dbFileElm.files[0];
    var reader = new FileReader();
    var output = ""; //placeholder for text output
    reader.onload = function (e) {
      output = e.target.result;
      displayContents(output);
      }
    reader.readAsText(filePath.files[0]);
  }

getElementById返回null值

3 个答案: