HTML5 文件 API：FileReader.readAsText() 返回“未定义”

Question

我在 Mac OS X 上使用 Chrome 12，我在文档中包含了 jQuery 1.6.1。

我尝试将文件的内容读取为文本并将其保存在具有以下 function 的数据对象中：

this.upload = function(file) {
    console.log('FileHandler.upload called with ' + file.name + '.');
    console.log(file);
    console.log(this.reader);

    data = {
        content: this.reader.readAsText(file)
    }

    console.log('Content: ' + data.content);
}

“file”接缝是一个有效的文件对象，“this.reader”是 FileReader 类型的新实例。 此代码创建以下控制台 output：

http://cl.ly/1Y2b383G2F272x1m1P0N

Answer 1

根据文档，这不是它的工作方式。 你应该调用readAsText()函数，当它完成时，结果存储在.result 。

Answer 2

我在文档的这个页面中找到了这个例子，它在第一次尝试时对我有用：

HTML：

<input type="file" onchange="previewFile()"><br>
<p class="content"></p>

JavaScript：

function previewFile() {
  const content = document.querySelector('.content');
  const [file] = document.querySelector('input[type=file]').files;
  const reader = new FileReader();

  reader.addEventListener("load", () => {
    // this will then display a text file
    content.innerText = reader.result;
  }, false);

  if (file) {
    reader.readAsText(file);
  }
}