如何在root中获取外部文本文件并使用javascript将其附加到p元素?

时间:2018-06-15 01:15:35

标签: javascript filereader

我正在处理一个项目,该项目需要检索.txt文件中的数据并将其附加到p元素。

这是我的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);

上面的一行会引发错误。我该怎么办呢?

帮助将非常感谢! 谢谢!

1 个答案:

答案 0 :(得分:1)

根据MDNonloadend中没有FileReader属性,只有onload属性。它有loadend个事件,但它不作为属性提供,因此您需要使用addEventListener

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