逐字节读取文件字节并解析为 int

Question

我必须从文件中读取数据。该数据由服务器按字节写入文件中。该文件有一个固定结构，现在我想用JS读取其中的信息。

我找到了http://www.html5rocks.com/en/tutorials/file/dndfiles/ 并将其复制到fiddle：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);

我知道前 7 个字节是垃圾，可以扔掉。接下来的 68 字节属于一起，每个值都是 4 字节大。在 68Bytes 之后再次出现 68 个可用字节（即 68bytes 是“时隙”）。

我的问题： 当我使用该代码时，我会得到很多符号（A、Q、&&&、特殊字符、..），但数据实际上很长。如何将它们解析为数字？根据 Filereader API readAsBinarsString() 返回原始二进制数据。以及如何正确解析整个文件？

所以，原来的文件是这样的：

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

当我使用上面的代码时，我得到如下输出：�&�&WK��

我还发现：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays（因为 FileReader 提供了一个返回 ArrayBuffer 的方法），所以我想我应该使用 readAsArrayBuffer()，但是如何使用它来获取我的数据？

Answer 1

你真的需要二进制文件吗？

请注意，根据 W3C 2012 年 7 月 12 日的工作草案，现在已弃用 readAsBinaryString 方法。

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