HTML5文件API读作文本和二进制文件

问题描述 投票:31回答:1

我目前正在研究HTML5文件API,我需要获取二进制文件数据。 The FileReaderreadAsTextreadAsDataURL方法工作正常,但readAsBinaryString返回与readAsText相同的数据。

我需要二进制数据,但我得到一个文本字符串。我错过了什么吗?

javascript html file html5
1个回答
72
投票

请注意:2018年:readAsBinaryString已过时。对于以前你曾经使用它的用例,这些天你使用readAsArrayBuffer(或者在某些情况下,使用readAsDataURL)。


readAsBinaryString说数据必须表示为binary string,其中:

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

JavaScript最初没有“二进制”类型(直到ECMAScript 5对Typed Array的WebGL支持*(详情如下) - 它已被ECMAScript 2015的ArrayBuffer取代)所以他们使用String并保证不存储任何字符String将超出0..255的范围。 (他们本可以使用数组来代替,但他们没有;也许大型字符串比大数字数组更具内存效率,因为数字是浮点数。)

如果你正在阅读一个主要是西方文字文本的文件(例如,大多数是英文),那么该字符串看起来就像文字一样。如果您读取其中包含Unicode字符的文件,您应该注意到一个区别,因为JavaScript字符串是UTF-16 **(详情如下),因此某些字符的值大于255,而根据File API规范,则为“二进制字符串”不会有任何大于255的值(Unicode代码点的两个字节有两个单独的“字符”)。

如果你正在阅读一个根本不是文本的文件(也许是一个图像),你可能在readAsTextreadAsBinaryString之间得到一个非常相似的结果,但是对于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中存储的“Testing 1 2 3”文件,我得到的结果如下:

Text (13):

54 65 73 74 69 6e 67 20 31 20 32 20 33

Binary (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(“测试1 2 3”的长度),readAsBinaryString没有,所以我得到28(两个字节的BOM加上每个字符两个字节) 。


* HTML 5支持XMLHttpRequest.responseresponseType = "arraybuffer"

**“JavaScript字符串是UTF-16”似乎是一个奇怪的陈述;他们不只是Unicode吗?不,JavaScript字符串是a series of UTF-16 code units;你将代理对看作两个单独的JavaScript“字符”,尽管事实上,代理对作为一个整体只是一个字符。请参阅链接了解详细信息。

© www.soinside.com 2019 - 2024. All rights reserved.