2

ファイルをメモリに読み込むために、HTML5 FileReader readAsArrayBuffer()メソッドを使用しています。仕様によると（上記のリンク）：

読み取りの処理中に BLOB からのデータが利用可能になると、 ユーザー エージェントはタスクをキューに入れ、読み取りが完了するまで読み取ったバイトを含む ArrayBuffer [TypedArrays] オブジェクトとして部分的な BLOB データを使用して結果を更新し、進行状況イベントの発生を伴う必要があります。 . 取得時に、result 属性は、現在ロードされているバイト数を表す部分的な Blob データ (合計の割合として) [ProgressEvents] を ArrayBuffer [TypedArrays] オブジェクトとして返します。ユーザー エージェントは、この読み取りメソッドの処理中に、そのような ArrayBuffer [TypedArrays] を少なくとも 1 つ返さなければなりません。最後に返された値は、読み取りの完了時です。

ただし、私がテストしたブラウザー (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]);
});

fileInputIDと typeの HTMLInputElement がありますfile。十分に大きなファイルが選択され、コールバックが実行されると、コンソールで次のようになります (この例は Chrome のものです)。

null
Uncaught TypeError: Type error

ArrayBufferがnullであるため、配列ビューUint8ArrayがArrayBufferからチャンクを読み取れないため、TypeErrorが発生すると思います。

不思議なことに、ファイルが大きいが大きすぎない場合、いくつかの進行状況イベントが実際に正常に実行されます。

FileReader の ArrayBuffer を確実に実装して、「進行」イベントで必要なデータを提供するにはどうすればよいですか?

4

1 に答える 1

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]);
}
于 2014-09-03T20:17:15.347 に答える