Reading file byte for byte and parsing for int

Question

I need to read data from a file. This data was written by the server byte to file. The file has a patch structure, now I want to read the information in it using JS.

I found http://www.html5rocks.com/en/tutorials/file/dndfiles/ and copied it for the violin: http://jsfiddle.net/egLof4ph/

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); var a = 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); 

I knew that the first 7 bytes are shit and can throw them away. The next 68Bytes belong to each other, and each value is 4 bytes. After 68Bytes, 68 bytes come again (which 68 bytes are "time slots").

My question is: When I use this code, I get a lot of signs (A, Q, & &, special characters, ...), but the data is actually long. How can I make them into numbers? According to the Filereader API, readAsBinarsString () returns raw binary data. And how to parse the whole file?

So, the source file is as follows:

  <7B>Metadata</7B><4B>long value</4B>....17times for each timeslot <4B>long value</4B>....17times again.... and this util the end of the file. 

When I use the code above, I get output like: & & WK

Also, I found: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays (since FileReader provides a method that returns an ArrayBuffer), so I think I should use readAsArrayBuffer (), but how to use it to access my data?

Answer 1

Do you really need a binary file?

Note that the readAsBinaryString method is now deprecated according to the W3C working draft of July 12, 2012.

 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.onloadend = function (evt) { if (evt.target.readyState == FileReader.DONE) { // DONE == 2 var a = new Uint8Array(evt.target.result) var binary = "" for (var i =0; i <= a.length; i++) { binary += Number(a[i]).toString(2) } document.getElementById('byte_content').textContent = binary; document.getElementById('byte_range').textContent = ['Read bytes: ', start + 1, ' - ', stop + 1, ' of ', file.size, ' byte file'].join(''); } };; var blob = file.slice(start, stop); var a = reader.readAsArrayBuffer(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);