[英]How do I loop through a file, byte by byte, in JavaScript?
我需要一些帮助来了解如何在JavaScript中访问文件以对其执行某些操作。
我想使用JavaScript逐字节循环一个文件。 我已经可以选择我想要阅读的文件了。 我可以读取文件的预设字节。
我在这里找到了一个关于如何读取文件切片的好例子:
这是我正在玩的代码片段:
<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;
}
我不确定这是你想要的但也许它可以提供帮助,无论如何我玩得很开心。
我尝试将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>
我将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)">
在FileReader的onload处理程序中,将结果转换为string( 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.