Wie durchlaufe ich eine Datei Byte für Byte in JavaScript?

Question

Ich brauche Hilfe, um herauszufinden, wie auf die Datei in JavaScript zugegriffen wird, um einige Operationen auszuführen.

Ich möchte eine Datei Byte für Byte mithilfe von JavaScript durchlaufen. Ich kann bereits auswählen, welche Datei ich gerne lesen würde. Und ich kann Preset-Byte der Datei lesen.

Ich habe dieses schöne Beispiel dafür, wie finden Sie hier ein Stück einer Datei zu lesen:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Hier ist der Code-Schnipsel, die ich mit bin zu spielen:

<style> 
    #byte_content { 
    margin: 5px 0; 
    max-height: 100px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    } 
    #byte_range { margin-top: 5px; } 
</style> 

<input type="file" id="files" name="file" /> Read bytes: 
<span class="readBytesButtons"> 
    <button data-startbyte="0" data-endbyte="4">1-5</button> 
    <button data-startbyte="5" data-endbyte="14">6-15</button> 
    <button data-startbyte="6" data-endbyte="7">7-8</button> 
    <button>entire file</button> 
</span> 
<div id="byte_range"></div> 
<div id="byte_content"></div> 

<script> 
    function readBlob(opt_startByte, opt_stopByte) { 

    var files = document.getElementById('files').files; 
    if (!files.length) { 
     alert('Please select a file!'); 
     return; 
    } 

    var file = files[0]; 
    var start = parseInt(opt_startByte) || 0; 
    var stop = parseInt(opt_stopByte) || file.size - 1; 

    var reader = new FileReader(); 

    // If we use onloadend, we need to check the readyState. 
    reader.onloadend = function(evt) { 
     if (evt.target.readyState == FileReader.DONE) { // DONE == 2 
     document.getElementById('byte_content').textContent = evt.target.result; 
     document.getElementById('byte_range').textContent = 
      ['Read bytes: ', start + 1, ' - ', stop + 1, 
      ' of ', file.size, ' byte file'].join(''); 
     } 
    }; 

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

    document.querySelector('.readBytesButtons').addEventListener('click', function(evt) { 
    if (evt.target.tagName.toLowerCase() == 'button') { 
     var startByte = evt.target.getAttribute('data-startbyte'); 
     var endByte = evt.target.getAttribute('data-endbyte'); 
     readBlob(startByte, endByte); 
    } 
    }, false); 
</script> 

Jetzt möchte ich die Datei, vier Bytes auf einmal durchlaufen, aber kann nicht scheinen, wie man das macht. Der Leser scheint mir nicht mehr als einmal zu lesen.

im Voraus

while(placemark != fileSize-4){ 
    output = file.slice(placemark, placemark + 4);  
    console.log(output); 
    placemark = placemark + 5; 
    } 

Danke:

Sobald ich aus der Datei mehr als einmal lesen kann, soll ich durch sie ganz leicht mit so etwas wiederholen sein können! Hier ist ein Link zu einer jsFiddle und plnkr Version

Answer 1

Ich bin mir nicht sicher, dass es das ist, was Sie wollten, aber vielleicht kann es helfen, und trotzdem hatte ich Spaß.
Ich habe versucht Einstellung reader und file Vars als global:

var reader = new FileReader(), step = 4, stop = step, start = 0, file; 
 

 
document.getElementById('files').addEventListener('change', load, true); 
 

 
function load() { 
 
    var files = document.getElementById('files').files; 
 
    file = files[0]; 
 
    reader.onloadend = function(evt) { 
 
    if (evt.target.readyState == FileReader.DONE) { 
 
     var result = evt.target.result; 
 
     document.getElementById('byte_content').textContent += result; 
 
     document.getElementById('byte_range').textContent = ['Read bytes: ', start, ' - ', start+result.length, 
 
     ' of ', file.size, ' byte file' 
 
     ].join(''); 
 
    } 
 
    } 
 
} 
 

 
function next() { 
 
    if (!file) { 
 
    alert('Please select a file!'); 
 
    return; 
 
    } 
 
    var blob = file.slice(start, stop); 
 
    reader.readAsBinaryString(blob); 
 

 
    start+= step; 
 
    stop = start+step; 
 
} 
 

 
function loop() { 
 
    if (!file) { 
 
    alert('Please select a file!'); 
 
    return; 
 
    } 
 
    if (start < file.size) { 
 
    next(); 
 
    setTimeout(loop, 50); 
 
    } 
 
}

<input type="file" id="files" name="file" />Read bytes: 
 
<span class="readBytesButtons"> 
 
    <button onclick="next()">next</button> 
 
    <button onclick="loop()">loop</button> 
 
</span> 
 
<div id="byte_range"></div> 
 
<div id="byte_content"></div>

Answer 2

Im onload-Handler von Filereader, um das Ergebnis zu string (toString()) umwandeln, dann lesen Sie 4 Zeichen in einer Zeit mit der slice Methode der String.

Answer 3

ich das Blob als ArrayBuffer gelesen hatte und eine DataView durch die Daten zu lesen verwenden

function readBlob(opt_startByte, opt_stopByte) { 
 

 
    var files = document.getElementById('files').files; 
 
    if (!files.length) { 
 
     alert('Please select a file!'); 
 
     return; 
 
    } 
 

 
    var file = files[0]; 
 
    var start = parseInt(opt_startByte) || 0; 
 
    var stop = parseInt(opt_stopByte) || file.size - 1; 
 

 
    var reader = new FileReader(); 
 

 
    reader.onload = function(evt) { 
 
     var placemark = 0, dv = new DataView(this.result), limit = dv.byteLength - 4, output; 
 
     while(placemark <= limit){ 
 
      output = dv.getUint32(placemark);  
 
      console.log(' 0x'+("00000000" + output.toString(16)).slice(-8)); 
 
      placemark += 4; 
 
     }  
 
    }; 
 

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

<input type="file" id="files" onchange="readBlob(0, 100)">