html5 fileReader - wie liest man nur die ersten N Zeichen einer Datei?

Question

Zur Zeit verwende ich ein Muster wie die im Anschluss an die ersten drei Zeichen einer Reihe von Dateien zu lesen:

var files = e.dataTransfer.files; 
for (var i = 0, f; f = files[i]; i++) { 
    var fr = new FileReader(); 
    fr.onload = function(e) { 
    var first_three_chars = e.target.result.substr(0,3); 
    } 
    fr.readAsText(f); 
} 

Das Problem ist, dass ich nur in den ersten drei Zeichen der Datei, während dieser Methode interessiert liest die gesamte Datei und verschwendet viel Speicher und Zeit. Wie kann ich schnell über die Dateien iterieren, indem ich schnell die ersten Zeichen betrachte?

Edit: slice() war die Antwort, danke sshen. Hier ist, wie ich es gemacht habe:

var files = e.dataTransfer.files; 
for (var i = 0, f; f = files[i]; i++) { 
    var fr = new FileReader(); 
    fr.onloadend = function(e) { 
    if (e.target.readyState == FileReader.DONE) { 
     var first_three_chars = e.target.result; 
    } 
    }; 
    var blob = f.slice(0, 3); 
    fr.readAsText(blob); 
} 

Answer 1

Sie können die .slice Methode verwenden. Sie können mehr lesen here

var reader = new FileReader(); 

reader.onloadend = function(evt) 
{ 
    if (evt.target.readyState == FileReader.DONE) // DONE == 2 
    { 
     alert(evt.target.result); 
    } 
}; 

var blob = file.slice(start, stop + 1); 
reader.readAsBinaryString(blob); 

Answer 2

In jedem Fall müssen Sie noch durch die Liste der Dateien, den Inhalt der FileList-Schnittstelle gehen. Der Grund, warum Sie in der gesamten Datei lesen, ist, wenn Sie onload an jede Datei anhängen und readAsText() aufrufen Wenn Sie nicht die gesamte Datei einlesen wollen, registrieren Sie einfach einen Event-Handler, der mit der Dateiliste vor dem aufgerufen wird Dateien werden geladen und durchlaufen sie. Etwas wie this, wo Sie an eine Formularübergabe anhängen oder etwas, das erwartet, die Dateiliste als Teil seines Ereignisobjekts zu erhalten, ohne jedes zuerst zu lesen.

<input type="file" id="files" name="files[]" multiple /> 
<output id="list"></output> 

<script> 
    function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 

    // files is a FileList of File objects. List some properties. 
    var output = []; 
    for (var i = 0, f; f = files[i]; i++) { 
     var fileName = f.name.substr(0,3); 
     output.push('<strong>', fileName, '</strong>'); 
    } 
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; 
    } 

    document.getElementById('files').addEventListener('change', handleFileSelect, false); 
</script>