我目前正在使用HTML5 File API，并且需要获取二进制文件数据。The FileReader的readAsText和readAsDataURL方法可以正常工作，但readAsBinaryString返回的数据与readAsText相同。
我需要二进制数据，但是我正在获取文本字符串。我想念什么吗？
最佳答案
注意2018年:readAsBinaryString已过时。对于以前曾经使用过的用例，如今，您将改为使用 readAsArrayBuffer (或在某些情况下，使用 readAsDataURL )。readAsBinaryString表示数据必须表示为binary string，其中:
...every byte is represented by an integer in the range [0..255].
JavaScript最初不具有“二进制”类型(直到ECMAScript 5对Typed Array *的WebGL支持*(以下详细信息)-它已被ECMAScript 2015的ArrayBuffer取代)，因此它们使用了String，以确保不存储任何字符字符串将超出范围0..255。 (它们本来可以使用Numbers数组，但事实并非如此；因为Numbers是浮点数，所以大型Strings可能比大型Numbers数组更节省内存。)
如果您正在阅读的文件大多是西方脚本(例如，大多数是英语)中的文本，则该字符串看起来很像文本。如果您读取的文件中包含Unicode字符，您会注意到其中的区别，因为JavaScript字符串为UTF-16 **(详细信息如下)，因此某些字符的值将大于255，而根据File API规范则为“二进制字符串”不会有大于255的任何值(对于Unicode代码点的两个字节，您将有两个单独的“字符”)。
如果您正在读取的文件根本不是文本文件(也许是图像)，那么
readAsText和readAsBinaryString之间可能仍然会得到非常相似的结果，但是有了readAsBinaryString，您就会知道不会尝试解释多个字节序列作为字符。您不知道是否使用readAsText，因为readAsText将使用encoding determination尝试找出文件的编码，然后将其映射到JavaScript的UTF-16字符串。如果创建文件并将其存储在ASCII或UTF-8以外的其他格式中，则可以看到效果。 (在Windows中，您可以通过记事本执行此操作；将“另存为”作为编码下拉列表，上面带有“Unicode”，通过该下拉列表查看它们似乎表示的是UTF-16数据；我确定Mac OS和* nix编辑器具有类似的功能。)这是一个页面，它以两种方式转储读取文件的结果:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function loadFile() {
var input, file, fr;
if (typeof window.FileReader !== 'function') {
bodyAppend("p", "The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('fileinput');
if (!input) {
bodyAppend("p", "Um, couldn't find the fileinput element.");
}
else if (!input.files) {
bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
bodyAppend("p", "Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
fr = new FileReader();
fr.onload = receivedText;
fr.readAsText(file);
}
function receivedText() {
showResult(fr, "Text");
fr = new FileReader();
fr.onload = receivedBinary;
fr.readAsBinaryString(file);
}
function receivedBinary() {
showResult(fr, "Binary");
}
}
function showResult(fr, label) {
var markup, result, n, aByte, byteStr;
markup = [];
result = fr.result;
for (n = 0; n < result.length; ++n) {
aByte = result.charCodeAt(n);
byteStr = aByte.toString(16);
if (byteStr.length < 2) {
byteStr = "0" + byteStr;
}
markup.push(byteStr);
}
bodyAppend("p", label + " (" + result.length + "):");
bodyAppend("pre", markup.join(" "));
}
function bodyAppend(tagName, innerHTML) {
var elm;
elm = document.createElement(tagName);
elm.innerHTML = innerHTML;
document.body.appendChild(elm);
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
</form>
</body>
</html>
如果我将其与存储在UTF-16中的“测试1 2 3”文件一起使用，则得到的结果如下:
文字(13):
54 65 73 74 69 6e 67 20 31 20 32 20 33
二进制(28):
ff fe 54 00 65 00 73 00 74 00 69 00 6e 00 67 00 20 00 31 00 20 00 32 00 20 00 33 00
如您所见，
readAsText解释了字符，所以我得到了13(“Testing 1 2 3”的长度)，而readAsBinaryString却没有，所以我得到了28(两个字节的BOM加每个字符两个字节) 。* HTML 5支持带
responseType = "arraybuffer"的XMLHttpRequest.response。**“JavaScript字符串为UTF-16”可能看起来很奇怪；他们不只是Unicode吗？不，JavaScript字符串为a series of UTF-16 code units；您实际上将代理对视为两个单独的JavaScript“字符”，尽管实际上，代理对整体上只是一个字符。有关详细信息，请参见链接。
关于javascript - HTML5 File API以文本和二进制形式读取，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3146483/