作为一个前端小菜,在我看来前端的文件操作是一个比较高逼格的东西了,就个人而言,可能平时接触的更多的是布局、样式、炫酷效果实现等等这些,但是就文件操作这方面可能接触的比较少,但是在自己独立做一个比较完善的中小型系统时,没有文件操作这方面知识的话有些功能可能就难以实现,比如文件上传、文件的本地存取等。
作为小菜,我之前也很少接触和用到关于文件操作的一些东西,但是最近在系统的浏览前端的基础的时候,发现自己还是有很多是没有掌握的。文件操作就是一大块。
首先概念接触
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)