每日一贴,今天的内容关键字为微软字节

先建一个文件,按UTF-16大端 BOM 格式存保一个符字串:hi aleck,

用使 file API 把他按二进制方法取读到浏览器。

文件取读方法在这里:

http://hi.baidu.com/ecalf830/item/e3b2d2c9b1003222a0b50a39

单简分析一下 file api 的关相用法

1、在浏览器中打开文件

<input type="file" id="f" multiple="multiple"/>

当 file 控件 有 mutiple 属性时,可以上传多个文件,文件打开后存保在 file 控件的  files 属性,这个例子中只打开一个文件,获得的文件的方法是 :

var file = document.getElementById("f").files[0];

2、Blob 与文件取读类 FileReader

二进制大对象 Blob (binary large object) 用于存储二进制字节数据,

创立一个 blob 对象: var blob  = new Blob();  该对象的size属性表现文件的字节数,似类于组数的length,slice 可以从文件中复制出一段二进制数据,用法似类于组数的 silce,复制失掉的数据也是 Blob 对象。

FileReader 类用于取读 Blob  数据对象。

创立一个文件取读 对象 :var reader = new FileReader();

浏览器打开的文件 file 承继于 Blob (thefile instanceof Blob == true),因此可以用使 FileReader  打开 file 对象。

FileReader 对象的属性、方法及在打开Blob数据中程过可以用使的回调函数(试在 firebug 下查看 FileReader 的属性和方法 console.log(new FileReader())):

    error: nullonabort: nullonerror: nullonload: null //取读胜利用调
onloadend: function(){...} //取读终了用调,即使取读失败也会用调
onloadstart: null //开始打开文件时用调
onprogress: null  //文件打开中程过,重复用调直至文件取读终了
readyState: 2result: "þÿhi aleck" //文件取读结果失掉的符字串
__proto__: FileReaderDONE: 2EMPTY: 0LOADING: 1abort: function abort() { [native code] }addEventListener: function addEventListener() { [native code] }constructor: function FileReader() { [native code] }dispatchEvent: function dispatchEvent() { [native code] }readAsArrayBuffer: function readAsArrayBuffer() { [native code] }  //取读为二进制字节缓冲
readAsBinaryString: function readAsBinaryString() { [native code] } //取读为二进制数据
readAsDataURL: function readAsDataURL() { [native code] } //取读为base64数据
readAsText: function readAsText() { [native code] } //取读为通普符字串
removeEventListener: function removeEventListener() { [native code] }__proto__: Object

可以在 onloadend 事件内绑定理处打开的文件数据的回调函数,然后打开文件,

这里将文件以二进制方法打开:reader.readAsBinaryString();

查 看 reader.result 可以看到取读结果。由于javascript 没有二进制数据型类,因此,二进制数据按个每字节的8位二进制数对应 的 unicode 编码的符字示显出来,因此二进制数据际实被示显为一串 ascii 符字,如果要取读的文件是英文格式的, 那么这个二进制数据看起 来跟际实的符字串很似相。

本例中 UTF-16 BOM 大端格式的 符字串  "hi aleck" 打开为二进制后失掉:

reader.result = "þÿhi aleck" //注意 reader.result.length 为 18, 这其中包含了空符字 \0

个每字节的8位二进制转为二位十六进制为:

 reader.result.split('').map(function(v){ return  ('0'+v.charCodeAt(0).toString(16)).slice(-2); })

失掉:

["fe", "ff", "00", "68", "00", "69", "00", "20", "00", "61", "00", "6c", "00", "65", "00", "63", "00", "6b"]
每日一道理
如果说生命是一座庄严的城堡,如果说生命是一株苍茂的大树,如果说生命是一只飞翔的海鸟。那么,信念就是那穹顶的梁柱,就是那深扎的树根,就是那扇动的翅膀。没有信念,生命的动力便荡然无存;没有信念,生命的美丽便杳然西去。(划线处可以换其他词语)

由于是UTF-16编码,个每符字占二字节,feff 是用于字节序标记的符字"零宽格空",其余符字编码由于只要需一个字节,位高字节用 0 补足,unicode 编码为0 的符字为空符字 \0 。

例如 0068 是字母 h 的 2 字节(16位二进制转4位16进制)编码格式:

String.fromCharCode(parseInt('0068',16)) //h

3、字节组数缓冲 ArrayBuffer 和 型类组数

ArrayBuffer 类的对象向指一段定长的内存间空,其属性 byteLength  表现对象的字节度长,slice 对象似类于 Blob 和组数的 slice 用于贝拷出必定字节度长的缓冲数据并创立成新的 ArrayBuffer 对象。

ArrayBuffer 缓冲字节数据对象只是一段内存间空,不能直接拜访,要需通过 DataView 对象(DataView 有点似类一个混合型类组数的元素成组的 list,其元素可所以几种型类组数中的任一种,这里不细述)或型类组数拜访内存的数据,他们的关系有点像 Blob 与 FileReader .

其中 javascript 型类组数有面下几种:

Float32Array Float64Array Int8ArrayInt16Array Int32Array Uint8Array Uint16Array Uint32Array Uint8ClampedArray

可以拜访面下的网站解了这些数据型类

http://www.javascripture.com/DataView

本例中用使存储无符号整数的 Uint8Array、 Uint16Array、 Uint32Array

Uint8Array 个每元素为一字节,达表范围为 0-255,Uint16Array 每元素 2字节,Uint32Array 个每元素4字节。

如果想要将 缓冲字节 ArrayBuffer 对象读入到型类组数中,比如可以这样

var buff = new ArrayBuffer(16); //创立一段16字节巨细的内存缓冲间空var u8 = new Uint8Array(buff,8); //创立一个8位无符号整形型类组数,并向指 buff 对象的前 8 个字节。var u16 = new Uint16Array(buff,8); //16 位型类组数var u32 = new Uint32Array(buff,8); //32为型类组数

组要注意的是,型类组数并没有贝拷出 ArrayBuffer 对象的内容,而是向指对应的内存间空,因此 u8、u16、u32 这几个组数拜访的是统一块内存,这意味着通过 u8 修改了内容后,u16 和 u32 的内容着跟变改。

当初 u8、u16 、u32 向指统一块 8 字节度长的内存,因此 u8 有8 个元素,u16 有4个元素,u32 则只有2个元素。

将下面打开文件失掉的字节的前8个通过u8组数个逐存入 buff 内

["fe","ff","00","68","00","69","00","20"].forEach(function(v,i){  u8[i] = parseInt(v,16);});

有:

u8 = [254, 255, 0, 104, 0, 105, 0, 32]u16 =  [65534, 26624, 26880, 8192]u32 = [1744895998, 536897792]

查看组数的元素:

('00'+u8[0].toString(16)).slice(-2) // "fe"
('00'+u8[1].toString(16)).slice(-2) // "ff"
('00'+u8[2].toString(16)).slice(-2) // "00"
('00'+u8[3].toString(16)).slice(-2) // "68"
('00'+u8[4].toString(16)).slice(-2) // "00"
('00'+u8[5].toString(16)).slice(-2) // "69"
('00'+u8[6].toString(16)).slice(-2) // "00"
('00'+u8[7].toString(16)).slice(-2) // "20"
('0000'+u16[0].toString(16)).slice(-4) // "fffe"
('0000'+u16[1].toString(16)).slice(-4) // "6800"
('0000'+u16[2].toString(16)).slice(-4) // "6900"

('0000'+u16[3].toString(16)).slice(-4) // "2000"
('00000000'+u32[0].toString(16)).slice(-8) // "6800fffe"
('00000000'+u32[1].toString(16)).slice(-8) // "20006900"

可以看到,取读 Blob 对象时,在多字节型类组数中( u16 2字节的元素 和 u32 4字节的元素), 元素的字节是按低位在前的顺序存储的,即小端方法。

我们也可以直接把通过 FileReader 的 readAsArrayBuffer() 方法将 Blob 对象取读到 ArrayBuffer 对象中,然后在 型类组数中拜访字节:

reader.readAsArrayBuffer(blob);var u16 = new Uint16Array(reader.result); u16 为 [65534, 26624, 26880, 8192, 24832, 27648, 25856, 25344, 27392]

型类组数的数据溢出题问:

因 为组数元素型类决议其在内存中据占的字节度长,其数值达表范围是按不同型类是不同的,如果存储的数值出超其达表范围便产生溢出,例 如, Uint8Array 型类的组数元素只据占一个字节,元素值的达表范围是 8位2进制, 即 0~255 ,如果试图存储 257 将产生溢出, 际实会失掉取模后的值

var uint8 = new Uint8Array(10);
uint8[0] //0
uint8[0]=257; uint8[0]; //1  257%256 = 1
uint8[0] = -1;
uint8[0]; //255   -1+256=255

uint8[0] = x;  则   uint8[0] == (x%256+256)%256 ; //true
Uint8ClampedArray 跟 Uint8Array 不同,如果给 Uint8ClampedArray 型类的组数元素值赋出超范围,则取最靠近所值赋的正当的值,这个组数重要用于理处图像的颜色数据,例如 canvas 的 image.data
var context = document.createElement("canvas").getContext("2d");var imageData = context.createImageData(16, 16);console.log(imageData); //ImageData {height: 16, width: 16, data: Uint8ClampedArray[1024]}

console.log(imageData.data instanceof Uint8ClampedArray)//true

var cint8 = new Uint8ClampedArray(10);  // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
cint8[0]=257; // [255, 0, 0, 0, 0, 0, 0, 0, 0, 0]
cint8[0]= -2; //[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

cint8[0] = x;则 cint8[0] == Math.min(Math.max(0,x),255)

文章结束给大家分享下程序员的一些笑话语录: 看新闻说中国输入法全球第一!领先了又如何?西方文字根本不需要输入法。一点可比性都没有。

微软字节javascript 类型数组读取二进制数据 -java教程相关推荐

  1. javascript 类型数组读取二进制数据

    先建一个文件,按UTF-16大端 BOM 格式保存一个字符串:hi aleck, 使用 file API 把他按二进制方式读取到浏览器. 文件读取方法在这里: http://hi.baidu.com/ ...

  2. matlab 十六进制数组,【MATLAB】MATLAB中读取二进制数据文件并加入到矩阵中

    MATLAB中读取二进制数据文件并加入到矩阵中的应用如下: 如果对c语言十分熟悉的话,应该对fopen,fclose,ftell,fseek,fread,fwrite,feof 这些函数非常熟悉了,在 ...

  3. [JavaScript]为JS处理二进制数据提供可能性的WEB API

    写这篇博客的起源是在div.io上的一篇文章<你所不知道的JavaScript数组>by 小胡子哥下的评论中的讨论. 因为随着XHR2和现代浏览器的普及,在浏览器当中处理二进制不再向过去那 ...

  4. python 读取二进制数据到可变缓冲区中

    想直接读取二进制数据到一个可变缓冲区中,而不需要做任何的中间复制操作.或者你想原地修改数据并将它写回到一个文件中去. 为了读取数据到一个可变数组中,使用文件对象的readinto() 方法.比如 im ...

  5. SQLite数据库如何存储和读取二进制数据

    1.       存储二进制数据 SQLite提供的绑定二进制参数接口函数为: int sqlite3_bind_blob(sqlite3_stmt*, int, const void*, int n ...

  6. 《Python Cookbook 3rd》笔记(5.9):读取二进制数据到可变缓冲区中

    读取二进制数据到可变缓冲区中 问题 你想直接读取二进制数据到一个可变缓冲区中,而不需要做任何的中间复制操作.或者你想原地修改数据并将它写回到一个文件中去. 解法 为了读取数据到一个可变数组中,使用文件 ...

  7. 前端读取文件图片信息流;js读取图片不同信息流;js读取图片;前端就js读取二进制数据;前端js读取文件流使用FileReader对象的readAsDataURL方法来读取图像文件;

    原文链接 FileReader来把文件读入内存,并且读取文件中的数据. readAsDataURL方法可以在浏览器主线程中异步访问文件系统,读取文件中的数据,且读取后 result 为 DataURL ...

  8. Matlab读取二进制数据文件

    第一步:函数fopen打开文件 fid=fopen('文件名',读取方式) fid:句柄值 小于0表示打开失败:大于0表示打开成功 文件名:字符串,使用单引号(本文例子'savedata.dat') ...

  9. 如何使用字节序列化双精度数组(二进制增量编码,用于低差单调浮点数据集)...

    低延迟系统需要高性能的消息处理和传递. 由于在大多数情况下,数据必须通过有线传输或进行序列化才能保持持久性,因此编码和解码消息已成为处理管道的重要组成部分. 高性能数据编码的最佳结果通常涉及应用程序数 ...

最新文章

  1. VTK:灯光之LightActor
  2. android2.2桌面,手机桌面课表软件
  3. 无法解决 equal to 运算中 Chinese_PRC_CI_AS 和 SQL_Latin1_General_CP1_CI_AS 之间的排序规则冲突。...
  4. 如何理解Minor/Major/Full GC
  5. 感受机房管理化繁为简-新款KVM使用心得
  6. 使用Chatkit构建Node.js命令行聊天应用程序
  7. 如何成为一名优秀的C程序员
  8. JAVA面试题之经典题型
  9. SAP License:MM常用事物码
  10. 网络通信之通过get/post方式提交参数给web应用
  11. STM32 IAP docs
  12. i.MX6ULL 开发板在Ubuntu系统下实现串口通信
  13. 【星辰傀儡线·命运环·卷一 血鸦】 4 金盔少女
  14. 【图神经网络】GNN 图神经网络相关知识点
  15. java怎么开发图形界面_Java Swing 图形界面开发简介
  16. 驭电之道-电子和电气的区别
  17. 火猴之图片立体翻转效果展示(firemonkey)
  18. Microsoft Dynamics AX发展历史
  19. 竞赛通知|2021早为杯大学生创新创业大赛!
  20. P60-前端基础HTML-表格样式

热门文章

  1. 计算机科学 实用书籍
  2. 大华事件检测智能服务器,大华股份:高速公路智能事件检测 解决方案
  3. 从头开始设置Manjaro Linux!
  4. 基于Spring MVC + Spring + MyBatis的【图书信息管理系统(一)】
  5. 瑞禧免疫示踪---放射性同位素标记合成;抗体抗原放射性同位素标记服务
  6. matplotlib绘图的核心原理讲解(超详细)
  7. Pr音画不同步的问题之一
  8. 小米监控系统open-falcon搭建
  9. pdf417错误纠正码计算笔记
  10. 各种进制的相互转换【进制转换器】【进制转换】【算法】