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