HTML5 File API以文本和二进制形式读取

一尘不染

HTML5 File API以文本和二进制形式读取

html

我目前正在使用HTML5 File API，并且需要获取二进制文件数据。 The FileReader的readAsText和readAsDataURL方法可以正常使用，但readAsBinaryString返回的数据与相同readAsText。

我需要二进制数据，但是我正在获取文本字符串。我想念什么吗？

阅读 315

2020-05-10

共1个答案

一尘不染

请注意2018年
：readAsBinaryString已过时。对于以前曾使用过的用例，最近这些天将使用readAsArrayBuffer（或在某些情况下为readAsDataURL）。

readAsBinaryString表示必须将数据表示为 二进制字符串 ，其中：

…每个字节都由[0..255]范围内的整数表示。

JavaScript最初没有“二进制”类型（直到ECMAScript 5对Typed
Array * 的WebGL支持*
（以下详细信息） -它已被ECMAScript 2015的ArrayBuffer取代），因此它们使用了String，以确保不存储任何字符字符串中的“
0”超出范围0..255。（它们本来可以使用Numbers数组，但事实并非如此；因为Numbers是浮点数，所以大型Strings可能比大型Numbers数组更节省内存。）

如果你正在读这主要是在西部的脚本文本（主要是英语，例如）的文件，那么该字符串看起来会很多
像文本。如果您读取的文件中包含Unicode字符，则应注意其中的区别，因为JavaScript字符串为UTF-16
** （以下详细信息） ，因此某些字符的值将大于255，而根据文件，“二进制字符串”
API规范不会有大于255的任何值（对于Unicode代码点的两个字节，您将有两个单独的“字符”）。

如果您正在读取的文件根本不是文本（也许是图像），则在readAsText和之间可能仍会得到非常相似的结果readAsBinaryString，但是readAsBinaryString您
知道
将不会尝试解释多字节序列。作为字符。您不知道是否使用readAsText，因为readAsText它将使用编码确定来尝试找出文件的编码，然后将其映射到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支持XMLHttpRequest.response与responseType = "arraybuffer"。

** “ JavaScript字符串为UTF-16”
可能看起来很奇怪；他们不只是Unicode吗？不，JavaScript字符串是一系列UTF-16代码单元；您实际上将代理对视为两个单独的JavaScript“字符”，尽管实际上，代理对整体上只是一个字符。有关详细信息，请参见链接。

2020-05-10