如何在JavaScript中逐字节循环遍历文件？

Question

我需要帮助理解如何在JavaScript中访问文件以执行一些操作。

我想使用JavaScript逐字节循环读取文件。我已经能够选择要读取的文件，并且可以读取文件的预设字节。

我在这里找到了一个很好的示例，可以读取文件的一部分：

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版本链接

- FredFury

---

如果可以的话，我会尝试从文件读取代码中重构出你的DOM操作代码。这样，如果你有一个明确的关注点分离，就更容易调试和进行更改。 - Callum Linington

我同意！我觉得一旦完成了这个，剩下的应该很容易...但是，我不确定怎么做？ - FredFury

如果我能解决“已经忙于读取Blobs”的问题，我猜那也可能有所帮助？ - FredFury

首先，在plnkr版本中，你的函数没有紧密括号。 - Callum Linington

代码运行得很好。我从字节“1”开始读取，因为我的测试文件中的第一个字节需要被跳过。我发布了这个代码，因为那是我正在使用的示例代码。 - FredFury

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>

- Kaiido

---

太棒了。是的。这很好，谢谢你。我猜这些变量是全局的，这样说起来也有道理。 - FredFury

Answer 2

我会将blob作为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)">

- Musa

---

谢谢！这绝对也是一个答案。 - FredFury

Answer 3

在FileReader的onload处理程序中，将结果转换为字符串（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;

- Alexander Stefanov

---

4个字节 != 4个字符 - Justinas

是的，如果我不需要实际的字节，那将是一个可爱的小解决方案-就像@Justinas提到的那样。不过还是非常感谢你们两个。 - FredFury