专业视频网站开发公司,兰州装修公司报价明细表,2022网站快速收录技术,河北网站建设推广文章简介
本篇文章为【JavaScript 漫游】专栏的第 041 篇文章#xff0c;主要对浏览器模型中 File 对象、FileList 对象和 FileReader 对象的知识点进行了简记。
File 对象
File 对象代表一个文件#xff0c;用来读写文件信息。它继承了 Blob 对象#xff0c;或者说是一种…
文章简介
本篇文章为【JavaScript 漫游】专栏的第 041 篇文章主要对浏览器模型中 File 对象、FileList 对象和 FileReader 对象的知识点进行了简记。
File 对象
File 对象代表一个文件用来读写文件信息。它继承了 Blob 对象或者说是一种特殊的 Blob 对象所有可以使用 Blob 对象的场合都可以使用它。
最常见的使用场合是表单的文件上传控件input typefile用户选中文件以后浏览器就会生成一个数组里面是每一个用户选中的文件它们都是 File 实例对象。
// HTML 代码如下
// input idfileItem typefile
var file document.getElementById(fileItem).files[0];
file instanceof File // truefile 是用户选中的第一个文件它是 File 的实例。
构造函数
浏览器原生提供一个 File() 构造函数用来生成 File 实例对象。
new File(array, name [, options]);File() 构造函数接受三个参数。
array一个数组成员可以是二进制对象或字符串表示文件的内容name字符串表示文件名或文件路径options配置对象设置实例的属性。该参数可选
第三个参数配置对象可以设置两个属性。
type字符串表示实例对象的 MIME 类型默认值为空字符串lastModified时间戳表示上次修改的时间默认为 Date.now()
var file new File([foo],foo.txt,{type: text/plain,}
);实例属性和实例方法
File 对象有以下实例属性。
File.lastModified最后修改时间File.name文件名或文件路径File.size文件大小单位字节File.type文件的 MIME 类型
var myFile new File([], file.bin, {lastModified: new Date(2018, 1, 1),
});
myFile.lastModified // 1517414400000
myFile.name // file.bin
myFile.size // 0
myFile.type // 上面代码中由于 myFile 的内容为空也没有设置 MIME 类型所以 size 属性等于 0type 属性就等于空字符串。
File 对象没有自己的实例方法由于继承了 Blob 对象因此可以使用 Blob 的实例方法 slice()。
FileList 对象
FileList 对象是一个类似数组的对象代表一组选中的文件每个成员都是一个 File 实例。它主要出现在两个场合。
文件控件节点input typefile的 files 属性返回一个 FileList 实例拖拉一组文件时目标区的 DataTransfer.files 属性返回一个 FIleList 实例
// HTML 代码如下
// input idfileItem typefile
var files document.getElementById(fileItem).files;
files instanceof FileList // true文件控件的 files 属性是一个 FileList 实例。
FileList 的实例属性主要是 length表示包含多少个文件。
FileList 的实例方法主要是 item()用来返回指定位置的实例。它接受一个整数作为参数表示位置的序号从零开始。但是由于 FileList 的实例是一个类似数组的对象可以直接用方括号运算符即 myFileList[0] 等同于 myFileList.item(0)所以一般用不到 item()。
FileReader 对象
FileReader 对象用于读取 File 对象或 Blob 对象所包含的文件内容。
浏览器原生提供一个 FileReader 构造函数用来生成 FileReader 实例。
var reader new FileReader();FileReader 有以下的实例属性。
FileReader.error读取文件时产生的错误对象FileReader.readyState整数表示读取文件时的当前状态。一共有三种可能的状态0 表示尚未加载任何数据1 表示数据正在加载2 表示加载完成FileReader.result读取完成后的文件内容有可能是字符串也可能是一个 ArrayBuffer 实例FileReader.onabortabort 事件用户终止读取操作的监听函数FileReader.onerrorerror 事件读取错误的监听函数FileReader.onloadload 事件读取操作完成的监听函数通常在这个函数里面使用 result 属性拿到文件内容FileReader.onloadstartloadstart 事件读取操作开始的监听函数FileReader.onloadendloadend 事件读取操作结束的监听函数FileReader.onprogressprogress 事件读取操作进行中的监听函数
// HTML 代码如下
// input typefile οnchangeonChange(event)function onChange(event) {var file event.target.files[0];var reader new FileReader();reader.onload function (event) {console.log(event.target.result)};reader.readAsText(file);
}上面代码中每当文件控件发生变化就尝试读取第一个文件。如果读取成功load事件发生就打印出文件内容。
FileReader 有以下实例方法。
FileReader.abort()终止读取操作readyState 属性将变成2FileReader.readAsArrayBuffer()以 ArrayBuffer 的格式读取文件读取完成后 result 属性将返回一个 ArrayBuffer 实例FileReader.readAsBinaryString()读取完成后result 属性将返回原始的二进制字符串FileReader.readAsDataURL()读取完成后result 属性将返回一个 Data URL 格式Base64 编码的字符串代表文件内容。对于图片文件这个字符串可以用于 img 元素的 src 属性。注意这个字符串不能直接进行 Base64 解码必须把前缀 data:*/*;base64从字符串里删除以后再进行解码FileReader.readAsText()读取完成后result 属性将返回文件内容的文本字符串。该方法的第一个参数是代表文件的 Blob 实例第二个参数是可选的表示文本编码默认为 UTF-8
/* HTML 代码如下input typefile οnchangepreviewFile()img src height200
*/function previewFile() {var preview document.querySelector(img);var file document.querySelector(input[typefile]).files[0];var reader new FileReader();reader.addEventListener(load, function () {preview.src reader.result;}, false);if (file) {reader.readAsDataURL(file);}
}上面代码中用户选中图片文件以后脚本会自动读取文件内容然后作为一个 Data URL 赋值给 img 元素的 src 属性从而把图片展示出来。
