javascript - HTML5 File API以文本和二进制形式读取-6ren

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

转载作者：IT王子更新时间：2023-10-29 03:18:11

26

4

我目前正在使用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/

26

4

0

文章推荐： javascript - 如何逐步绘制矢量路径？ (拉斐尔.js)

文章推荐： unit-testing - 调试在命令行中工作，但在 UI 中未命中断点

android - 未处理的异常 : Android. Views.InflateException:二进制 XML 文件行 #1:二进制 XML 文件行 #1:类 fragment 膨胀时出错
我正在尝试将谷歌地图集成到 Xamarin Android。但是，如标题中所写，收到错误。此错误出现在我的 SetContentView (Resource.Layout.Main); 上，如下所示:
Delphi读取非文本文件(二进制)
在 Delphi 中如何以非文本模式打开二进制文件？类似于 C 函数 fopen(filename,"rb") 最佳答案有几个选项。 1。使用文件流 var Stream: TFileStrea
计算段中的一个(二进制)
我现在正在处理一个问题，如下所示: 有两个数字 x1 和 x2 并且 x2 > x1。例如 x1 = 5; x2 = 10; 而且我必须在二进制表示中找到 x1 和 x2 之间的总和。 5 = 10
gcc - 二进制 AND (&) 的无效操作数
我有这个“程序集”文件(仅包含 directives ) // declare protected region as somewhere within the stack .equiv prot_s
Powershell 二进制 grep
有没有办法在powershell中确定指定的文件是否包含指定的字节数组(在任何位置)？就像是: fgrep --binary-files=binary "$data" "$filepath" 当然，
Delphi 二进制/文本文件必要性
我是一名工程师，而不是软件程序员，所以请原谅我的无知。我编写了一个 Delphi(7SE) 程序，用于从连接到两个数字温度计的 USB 端口读取“真实”数据类型。我已经完成了该计划的大部分内容。
c++ - 二进制 + 的无效操作数
我有一些代码，例如: u=(float *)calloc(n, sizeof(float)); for(i=1; i
c++ - 二进制 * 的无效操作数
typedef struct pixel_type { unsigned char r; unsigned char g; unsigned char b;
c++ - 二进制-十进制负位集
如何判断二进制数是否为负数？目前我有下面的代码。它可以很好地转换为二进制文件。转换为十进制时，我需要知道最左边的位是否为 1 以判断它是否为负数，但我似乎无法弄清楚该怎么做。此外，我如何才能让它返
c++ - 二进制 * 运算符未找到
我有一个带有适当重载的 Vect*float 运算符的 vector 类，我正在尝试创建全局/非成员 float*Vect 运算符，如下所示:(注意这是一个经过大量编辑的示例) class Vect
图像的转换--->二进制--->图像使用C
对于使用 C 编程的项目，我们正在尝试将图像转换为二进制数据，反之亦然。我们在网上找到的所有其他解决方案都是用 C++ 或 Java 编写的。这是我们尝试过的方法: 将图像转换为包含二进制数据的文本文
python - (二进制)对列表的元素求和
我需要对列表的元素求和，其中包含所有零或一，如果列表中有 1，则结果为 1，否则为 0。 def binary_search(l, low=0,high=-1): if not l: retu
python - 如何将浮点十进制转换为浮点八进制/二进制？
我到处搜索以找到将 float 转换为八进制或二进制的方法。我知道 float.hex 和 float.fromhex。是否有模块可以对八进制/二进制值执行相同的工作？例如:我有一个 float 1
c - 二进制 "|"的无效操作数
当我阅读有关 list.h 文件中的 hlist 的 FreeBSD 源代码时，我对这个宏感到困惑: #define hlist_for_each_entry_safe(tp, p, n, head,
c - 二进制 % 的操作数无效？
我不知道出了什么问题，也不知道为什么会出现此错误。我四处搜索，但我终究无法弄明白。 void print_arb_base(unsigned int n, unsigned int b) {
algorithm - 十进制转位(二进制)
在任何语言中都可以轻松地将十进制转换为二进制，反之亦然，但我需要一个稍微复杂一点的函数。给定一个十进制数和一个二进制位，我需要知道二进制位是开还是关(真或假)。示例: IsBitTrue(30,1
c - 为什么使用此代码创建的文本文件具有字符集 == 二进制？
在下面的代码中，我创建了两个文件，一个是文本格式，另一个是二进制格式。文件的图标显示相同。但是这两个文件的特征完全相同，包括大小、字符集(==二进制)和流(八位字节)。为什么没有文本文件？因为如果我明
Python 二进制 EOF
我想通读一个二进制文件。谷歌搜索“python binary eof”引导我here . 现在，问题: 为什么容器(SO 答案中的 x)不包含单个(当前)字节而是包含一大堆字节？我做错了什么？如果应
python - 二进制/十六进制浮点输入
为什么只允许以 10 为基数使用小数点？为什么以下会引发语法错误？ 0b1011101.1101 我输入的数字是否有歧义？除了 93.8125 之外，字符串似乎没有其他可能的数字同样的问题也适用于其
c++ - boost::二进制<>
boost 库中有二进制之类的东西吗？例如我想写: binary a; 我很惭愧地承认我曾尝试找到它(Google、Boost)但没有结果。他们提到了一些关于 binary_int<> 的内容，但我既

首页

博学

6Ren·AI

商城

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