大佬教程收集整理的这篇文章主要介绍了HTML5 File API以文本和二进制形式读取,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
:readAsBinaryString
已过时。对于以前曾使用过的用例,最近这些天将使用readAsArrayBuffer
(或在某些情况下为readAsDataURL
)。
readAsBinaryString
表示必须将数据表示为 ,其中:
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表,每个字符两个字节)。
** “ JavaScript字符串为UTF-16” 可能看起来很奇怪;他们不只是Unicode吗?不,JavaScript字符串是一系列UTF-16代码单元;您实际上将代理对视为两个单独的JavaScript“字符”,尽管实际上,代理对整体上只是一个字符。有关详细信息,请参见链接。
我目前正在使用HTML5 File API,并且需要获取二进制文件数据。 The
FileReader
的readAsText
和readAsDataURL
方法可以正常使用,但readAsBinaryString
返回的数据与相同readAsText
。
我需要二进制数据,但是我正在获取文本字符串。我想念什么吗?
以上是大佬教程为你收集整理的HTML5 File API以文本和二进制形式读取全部内容,希望文章能够帮你解决HTML5 File API以文本和二进制形式读取所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。