FileReader의 ArrayBuffer에서 부분 데이터 추출

Question

HTML5 FileReader readAsArrayBuffer() 메서드를 사용하여 파일을 메모리로 읽습니다. 스펙 (위 링크)에있어서, 상기 판독 처리 중에 블롭 데이터대로, 사용자 에이전트는 ArrayBuffer [TypedArrays]로 부분 블로 브 데이터 결과를 업데이트하는 작업을 대기한다

읽기 완료 될 때까지 바이트를 포함하는 객체는 이벤트의 진행을 동반합니다. 결과 속성은 ArrayBuffer [TypedArrays] 객체와 같이 현재로드 된 바이트 수 ( 의 분수) [ProgressEvents]의 부분 Blob 데이터 을 반환합니다. 사용자 에이전트는이 읽기 메소드를 처리하는 동안 ArrayBuffer [TypedArrays] 중 하나 이상을 반환해야합니다. 마지막으로 반환 된 값은 읽기 완료입니다.

그러나, 내가 테스트 한 브라우저 (파이어 폭스, 크롬, 오페라)는 reader.result 속성은 지속적으로 업데이트 될 것 같지 않습니다. 예를 들어 ID가 fileInput의 HTMLInputElement을하고 file 입력

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

. 충분히 큰 파일을 선택하고 콜백 여기, 실행 (이 예는 크롬에서이다) 콘솔에 발생하는 경우 :

null 
Uncaught TypeError: Type error 

내가 배열보기 Uint8Array부터 청크를 읽을 수 있기 때문에 형식 오류가 발생 있다고 생각 ArrayBuffer가 null이기 (위해) 때문에, ArrayBuffer

이상하게도 파일이 크지 만 너무 크지 않은 경우 몇 가지 진행률 이벤트가 실제로 성공적으로 실행됩니다.

"진행"이벤트에서 필요한 데이터를 제공하기 위해 어떻게 FileReader의 ArrayBuffer를 안정적으로 구현합니까?

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