HTML5文件API: FileReader.readAsText()返回"undefined"

Question

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

我尝试使用以下函数将文件内容作为文本读取并保存到一个数据对象中：

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 类型的一个新实例。此代码创建以下控制台输出:

http://cl.ly/1Y2b383G2F272x1m1P0N

- Claudio Albertin

Answer 1

根据文档，那不是它的工作方式。您应该调用readAsText()函数，并且在完成后结果将存储在.result中。

- pimvdb

Answer 2

我在文档的this页面中找到了这个示例，第一次尝试就成功了：

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);
  }
}

- Matthew Holder