जावास्क्रिप्ट में बाइट द्वारा बाइट, फाइल के माध्यम से मैं कैसे लूप करूं?

Question

मुझे जावास्क्रिप्ट में फ़ाइल को इस पर कुछ संचालन करने के लिए कैसे पहुंचाया जाता है, इस बारे में मुझे अपने सिर को प्राप्त करने में कुछ मदद चाहिए।

मैं जावास्क्रिप्ट का उपयोग करके बाइट द्वारा फ़ाइल बाइट के माध्यम से लूप करना चाहता हूं। मैं पहले से ही चुन सकता हूं कि मैं कौन सी फाइल पढ़ना चाहूंगा। और मैं फ़ाइल के प्रीसेट बाइट पढ़ सकता हूं।

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

यहाँ कोड का स्निपेट जो मैं के साथ खेल रहा हूँ है:

मैं कैसे एक फ़ाइल यहाँ का एक टुकड़ा पढ़ने के लिए पर यह अच्छा उदाहरण मिल गया है

<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> 

अब मैं एक समय में फ़ाइल के माध्यम से चार बाइट लूप करना चाहता हूं, लेकिन ऐसा नहीं लगता कि यह कैसे करना है। पाठक मुझे एक से अधिक बार पढ़ने की अनुमति नहीं देता है।

एक बार मैं फ़ाइल से एक बार से अधिक पढ़ सकते हैं, मैं कुछ इस तरह के साथ काफी आसानी से यह माध्यम से पुनरावृति करने के लिए सक्षम होना चाहिए:

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

अग्रिम धन्यवाद! यहाँ एक jsFiddle और plnkr संस्करण

Answer 1

मुझे यकीन नहीं है कि यह वही है जो आप चाहते थे लेकिन शायद यह मदद कर सकता है, और वैसे भी मुझे मज़ा आया।
मैं वैश्विक रूप reader और file वार्स की स्थापना की कोशिश की:

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

FileReader की ऑनलोड हैंडलर में के लिए एक लिंक, स्ट्रिंग (toString()) के परिणाम में परिवर्तित होता है, तो स्ट्रिंग के slice विधि के साथ एक समय में 4 वर्ण पढ़ें।

var contents = null; 

reader.onload = function(){ 
    contents = reader.result.toString(); 
} 

var startByte = 0; 

// read 4 bytes at a time 
var step = 4; 

// actual reading (doesn't alter the contents object) 
console.log(contents.slice(startByte, step)) 

// update the next startByte position 
startByte += step; 

Answer 3

मैं एक ArrayBuffer के रूप में ब्लॉब पढ़ सकते हैं और एक DataView का उपयोग डेटा के माध्यम से पढ़ने के लिए चाहते हैं

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)">