文件API（篇一）

来源：互联网发布：桌面总是出现精选淘宝编辑：程序博客网时间：2024/06/01 14:35

作为一个前端小菜，在我看来前端的文件操作是一个比较高逼格的东西了，就个人而言，可能平时接触的更多的是布局、样式、炫酷效果实现等等这些，但是就文件操作这方面可能接触的比较少，但是在自己独立做一个比较完善的中小型系统时，没有文件操作这方面知识的话有些功能可能就难以实现，比如文件上传、文件的本地存取等。

作为小菜，我之前也很少接触和用到关于文件操作的一些东西，但是最近在系统的浏览前端的基础的时候，发现自己还是有很多是没有掌握的。文件操作就是一大块。

首先概念接触

FileList对象与file对象

在HTML5中对文件选区控件<input type="file" />新增了multiple属性，file控件中允许一次放置多个文件，控件中选择的每一个文件都是一个file对象；而所有这些file对象的列表构成了FileList对象。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>文件操作</title></head><body>    <input type="file" id="file" multiple>    <button id="btn">文件上传</button>    <script>        var file_input = document.getElementById('file')        var uplaod_btn = document.getElementById('btn')        uplaod_btn.addEventListener('click', upload, true)        function upload () {            // file_input.files表示上传的文件对象数组            var file_list = file_input.files            console.log(file_list)            console.log(typeof file_list)            var len = file_list.length            for(var i = 0; i < len; i++) {                console.log(file_input.files[i])            }        }    </script></body></html>

结果：这里写图片描述

如上结果，file对象的列表集合即为FileList对象，每个file对象都包含如下属性：

lastModified: 最后一次修改的时间，为时间戳
lastModifiedDate: 最后一次修改的日期，为Date类型
name: 文件名称
size: 文件大小
type: 文件类型
relativePath: File 相关的 path 或 URL。(具体不太理解这个属性有什么用，MDN上说其尚未标准化)

ArrayBuffer对象与ArrayBufferView对象

产生的背景：HTML5之前，在读取原始二进制数据及对音视频数据进行操作时，开发者需要把二进制数据转化为对应的字符串，并使用charCodeAt方法来读取原始二进制数据中的每一个字节，这种方法效率低下，为了高效的访问原始二进制数据，HTML5中新增了这两种对象。

二者的关系：ArrayBuffer对象代表一个固定长度的用于装在数据的缓冲区，而ArrayBuffer对象中的内容不能直接对其进行操作，所以需要使用ArrayBufferView对象来读写ArrayBuffer对象中的内容。

创建ArrayBuffer对象：new ArrayBuffer(size) size为无符号长整数，用于表示缓冲区的长度，单位为byte。ArrayBuffer对象有一个byteLength属性，表示缓冲区长度。

在HTML5中，通过ArrayBufferView对象以一种准确的格式来表示ArrayBuffer缓存区中的内容，在html5中一般不直接使用ArrayBufferView对象，而是使用继承ArrayBufferView类的子类的实例对象来存取ArrayBuffer缓存区中的数据

继承了ArrayBufferView类的子类有如下几种：

ArrayBufferView is a helper type representing any of the following JavaScript TypedArray types:

这里写图片描述

除上面图片之中的外还有Uint8ClampedArray和DataView

Uint8Array与Uint8ClampedArray都是表示8位无符号整数数组，二者的区别在于：Uint8Array 与 Uint8ClampedArray 的区别

<script>    // 创建ArrayBuffer对象    var buf = new ArrayBuffer(28)    // 创建ArrayBufferView对象    var int32array = new Int32Array(buf)    console.log(int32array)</script>

这里写图片描述

由于Int32Array类型的字节长度位4，缓冲区的长度为28，所以其对应的32位整数数组的长度为7

ArrayBufferView对象属性：

这里写图片描述

buffuer: 只读属性，代表ArrayBufferView 对象所引用的ArrayBuffer缓存区
byteLength: 只读属性，表示数据长度，与ArrayBuffer对象的size属性一致
byteOffset: 偏移量，表示数组开始引用的位置与ArrayBuffer缓存区第一个字节之间的偏移量
length： ArrayBufferView对象的数组长度

DataView对象

在HTML5中除了上述的继承了ArrayBufferView类的子类的实例对象之外也可以使用继承了ArrayBufferView类的DataView类的实例对象来存取ArrayBuffer缓存区中的数据

使用：
1、创建DataView对象

// 创建DataView对象var view = new DataView(buffer, byteOffset, byteLength)

参数说明

1）、buffer：代表DataView对象所引用的ArrayBuffer缓存区

2）、byteOffset：表示DataView对象开始引用的位置与ArrayBuffer缓存区第一个字节之间的偏移量，单位为byte

3）、byteLength： DataView对象所跨长度（字节byte）

2、DataView对象可以使用的方法：
getInt8/getUint8：用于得到指定位置处的一个8位整数

// 参数byteOffset代表所需要获取的整数所在位置与DataView对象对ArrayBuffer缓存区的开始引用位置之间相隔的字节数var int8Value = dataview.getInt8(byteOffset)

setInt8/setUnit8：用于设定指定位置处的一个8位整数的数值

// byteOffset意义同上，value表示需要设定的值dataview.setInt8(byteOffset, value)

getInt16/getUint16/getInt32/getUint32/getFloat32/getFloat64：用于得到指定位置处的一个16/32/64位整数/浮点数的数值

// byteOffset不重复叙述。littleEndian用于判断该整数数值的字节序，为布尔类型。当参数值为true值时表示以little-endian方式读取该整数数值，反之表示以big-endian方式读取该整数数值var int16Value = dataview.getInt16(byteOffset, littleEndian)

Little-endian与Big-endian：

1． Little-endian：将低序字节存储在起始地址（低位编址）
2． Big-endian：将高序字节存储在起始地址（高位编址）

二者区别图示如下：

这里写图片描述

setInt16/setUint16/setInt32/setUint32/setFloat32/setFloat64：用于设定指定位置处的一个16/32/64位整数/浮点数的数值

// 第二个参数为设定的值，其余参数同上dataview.setInt16(byteOffset, value, littleEndian)

阅读全文

1 0