时间戳

首页 > 解决方案 > 如何在根目录中获取外部文本文件并使用 javascript 将其附加到 p 元素？

javascript - 如何在根目录中获取外部文本文件并使用 javascript 将其附加到 p 元素？

问题描述

我正在开发一个需要检索 .txt 文件中的数据并将其数据附加到 ap 元素的项目。

这是我的 HTML：

    <p id="displayName"></p>

这是我的 JavaScript：

if (window.File && window.FileReader && window.FileList) {
  /*Great success! All the File APIs are supported.*/
} else {
  alert('error: The File APIs are not fully supported in this browser.');
}

function errorHandler(e) {
  var msg = '';

  switch (e.code) {
    case FileError.QUOTA_EXCEEDED_ERR:
      msg = 'QUOTA_EXCEEDED_ERR';
      break;
    case FileError.NOT_FOUND_ERR:
      msg = 'NOT_FOUND_ERR';
      break;
    case FileError.SECURITY_ERR:
      msg = 'SECURITY_ERR';
      break;
    case FileError.INVALID_MODIFICATION_ERR:
      msg = 'INVALID_MODIFICATION_ERR';
      break;
    case FileError.INVALID_STATE_ERR:
      msg = 'INVALID_STATE_ERR';
      break;
    default:
      msg = 'Unknown Error';
      break;
  };

  console.log('Error: ' + msg);
}

function onInitFs(fs) {

  fs.root.getFile('untitled.txt', {}, function(fileEntry) {

    // Get a File object representing the file,
    // then use FileReader to read its contents.
    fileEntry.file(function(file) {
      var reader = new FileReader();

      reader.onloadend = function(e) {
        var txtArea = document.createElement('textarea');
        txtArea.value = this.result;
        document.getElementById("displayName").appendChild(txtArea);
      };

      reader.readAsText(file);
    }, errorHandler);

  }, errorHandler);

}

window.requestFileSystem(window.TEMPORARY, 1024 * 1024, onInitFs,
  errorHandler);

上面的行会引发错误。我应该如何解决这个问题？

帮助将不胜感激！谢谢！

标签： javascriptfilereader

解决方案

根据MDN， 中没有onloadend属性FileReader，只有onload属性。它有一个loadend事件，但它不能作为属性使用，因此您需要使用addEventListener.

reader.addEventListener("loadend", function(e) {
    var txtArea = document.createElement('textarea');
    txtArea.value = this.result;
    document.getElementById("displayName").appendChild(txtArea);
};

推荐阅读