从 FileReader 的 ArrayBuffer 中提取部分数据答案

【问题标题】：Extracting partial data out of a FileReader's ArrayBuffer从 FileReader 的 ArrayBuffer 中提取部分数据
【发布时间】：2013-05-18 18:44:36
【问题描述】：

我正在使用HTML5 FileReader readAsArrayBuffer() 方法将文件读入内存。根据规范（上面链接）：

在处理读取时，随着来自 blob 的数据变得可用， 用户代理应将任务排队以使用部分 Blob 更新结果作为 ArrayBuffer [TypedArrays] 对象的数据，包含读取的字节直到读取完成，伴随着进度的射击事件。获取时，结果属性返回部分 Blob 数据表示当前加载的字节数（作为总计）[ProgressEvents]，作为 ArrayBuffer [TypedArrays] 对象；用户代理必须至少返回一个这样的 ArrayBuffer [TypedArrays] 在处理此读取方法时。最后返回的值是读取完成。

但是，在我测试过的浏览器（Firefox、Chrome 和 Opera）中，reader.result 属性似乎并没有持续更新。例如：

var reader = new FileReader(), pos = 0;

reader.addEventListener("progress", function(event){
    console.log(reader.result);
    var content = new Uint8Array(reader.result, pos, event.loaded);
    pos = event.loaded;

    // do stuff with the content down here
});

document.getElementById("fileInput").addEventListener("change", function(event){
    reader.readAsArrayBuffer(event.target.files[0]);
});

其中有一个 ID 为 fileInput 的 HTMLInputElement 并键入 file。 When a sufficiently large file is chosen and the callback runs, here is what happens on the console (this example is from Chrome):

null
Uncaught TypeError: Type error

我认为出现 TypeError 是因为数组视图 Uint8Array 无法从 ArrayBuffer 读取块，因为 ArrayBuffer 为空。

奇怪的是，如果文件很大但不是太大，一些进度事件实际上会成功运行。

您如何可靠地实现 FileReader 的 ArrayBuffer 以在“进度”事件时为您提供所需的数据？

【问题讨论】：

标签： javascript html buffer filereader arraybuffer

【解决方案1】：

我猜你可以在文件加载后读取 ArrayBuffer。以下功能也可以处理大文件。希望对你有帮助，

function onfilechange(evt) {
var reader = new FileReader(); 
reader.onload = function(evt) {
  var chars  = new Uint8Array(evt.target.result);
  var CHUNK_SIZE = 0x8000; 
  var index = 0;
  var length = chars.length;
  var result = '';
  var slice;
  while (index < length) {
    slice = chars.subarray(index, Math.min(index + CHUNK_SIZE, length)); 
    result += String.fromCharCode.apply(null, slice);
    index += CHUNK_SIZE;
  }
  // Here you have file content as Binary String in result var
};
reader.readAsArrayBuffer(evt.target.files[0]);
}

【讨论】：