File FileList 和 FileReader 对象详解

更新日期: 2019-12-18阅读: 2.3k标签: 对象

File 对象、FileList 对象与 FileReader 对象大家或许不太陌生,常见于文件上传下载操作处理(如处理图片上传预览,读取文件内容,监控文件上传进度等问题)。

那么本文将与大家深入介绍两者。


一、File 对象

1. 概念介绍

File 对象提供有关文件的信息,并允许网页中的 JavaScript 读写文件。

最常见的使用场合是表单的文件上传控件,用户在一个 <input type="file"> 元素上选择文件后,浏览器会生成一个数组,里面是每一个用户选中的文件,它们都是 File 实例对象。

另外值得提到一点:File 对象是一种特殊 Blob 对象,并且可以用在任意的 Blob 对象的 context 中。比如说, FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

// html 代码如下
// <input id="fileItem" type="file">
const file = document.getElementById('fileItem').files[0];
file instanceof File // true

2. 对象使用

浏览器原生提供一个 File() 构造函数,用来生成 File 实例对象。

const myFile = new File(bits, name[, options]);

参数:

bits:

一个数组,表示文件的内容。成员可以是 ArrayBuffer,ArrayBufferView,Blob,或者 domString 对象的 Array,或者任何这些对象的组合。

通过这个参数,也可以实现 ArrayBuffer,ArrayBufferView,Blob 转换为 File 对象。

name:

字符串,表示文件名或文件路径。

options:

配置对象,设置实例的属性。该参数可选。可选值有如下两种:

type: DOMString,表示将要放到文件中的内容的 MIME 类型。默认值为 "" 。
lastModified: 数值,表示文件最后修改时间的 Unix 时间戳(毫秒)。默认值为 Date.now()。

示例:

const myFile = new File(['leo1', 'leo2'], 'leo.txt', {type: 'text/plain'});

根据已有的 blob 对象创建 File 对象:

const myFile = new File([blob], 'leo.png', {type: 'image/png'});

3. 实例属性和方法

3.1 实例属性

实例有以下几个属性:

File.lastModified:最后修改时间。只读

自 UNIX 时间起始值(1970年1月1日 00:00:00 UTC)以来的毫秒数

File.name:文件名或文件路径。只读

出于安全考虑,返回值不包含文件路径 。

File.size:文件大小(单位字节)。只读File.type:文件的 MIME 类型。只读
// HTML 代码如下
// <input id="fileItem" type="file">
const myFile = document.getElementById('fileItem')
myFile.addEventListener('change', function(e){
    const file = this.files[0];
    console.log(file.name);
    console.log(file.size);
    console.log(file.lastModified);
    console.log(file.lastModifiedDate);
});

3.2 实例方法

File 对象没有定义任何方法,但是它从 Blob 接口继承了以下方法:

Blob.slice([start[, end[, contentType]]])

返回一个新的 Blob 对象,它包含有源 Blob 对象中指定范围内的数据

4. 兼容性



二、FileList 对象

1. 概念介绍

FileList 对象是一个类数组对象,每个成员都是一个 File 实例,主要出现在两种场合:

通过 <input type="file"> 控件的 files 属性,返回一个 FileList 实例。

另外,当 input 元素拥有 multiple 属性,则可以用它来选择多个文件。

通过拖放文件,查看 DataTransfer.files 属性,返回一个 FileList 实例。
// HTML 代码如下
// <input id="fileItem" type="file">
const files = document.getElementById('fileItem').files;
files instanceof FileList // true

const firstFile = files[0];

2. 对象使用

所有 type 属性为 file 的 <input> 元素都有一个 files 属性,用来存储用户所选择的文件. 例如:

3. 实例属性和方法

3.1 实例属性

实例只有一个属性:

FileList.length:返回列表中的文件数量。只读

3.2 实例方法

实例只有一个方法:

FileList.item():用来返回指定位置的实例,从 0 开始。

由于 FileList 实例是个类数组对象,可以直接用方括号运算符,即 myFileList[0] 等同于 myFileList.item(0) ,所以一般用不到 item() 方法。

4. 兼容性


5. 实例

选择多个文件,并获取每个文件信息:

// HTML 代码如下
// <input id="myfiles" multiple type="file">
const myFile = document.querySelector("#myfiles");
myFile.addEventListener('change', function(e){
    let files = this.files;
    let fileLength = files.length;
    let i = 0;
    while ( i < fileLength) {
        let file = files[i];
        console.log(file.name);
        i++;
    }    
});


三、FileReader 对象

1. 概念介绍

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

简单理解,就是用于读取 File 对象或 Blob 对象所包含的文件内容。

2. 对象使用

浏览器原生提供一个 FileReader 构造函数,用来生成 FileReader 实例。

const reader = new FileReader();

3. 实例属性和方法

FileReader 对象拥有的属性和方法较多。

3.1 实例属性

FileReader.error : 表示在读取文件时发生的错误。只读FileReader.readyState : 整数,表示读取文件时的当前状态。只读

共有三种状态: 
0 : EMPTY,表示尚未加载任何数据;
1 : LOADING,表示数据正在加载;
2 : DONE,表示加载完成;

FileReader.result 读取完成后的文件内容。只读

仅在读取操作完成后才有效,返回的数据格式取决于使用哪个方法来启动读取操作

3.2 事件处理

FileReader.onabort : 处理abort事件。该事件在读取操作被中断时触发。FileReader.onerror : 处理error事件。该事件在读取操作发生错误时触发。FileReader.onload : 处理load事件。该事件在读取操作完成时触发。FileReader.onloadstart : 处理loadstart事件。该事件在读取操作开始时触发。FileReader.onloadend : 处理loadend事件。该事件在读取操作结束时(要么成功,要么失败)触发。FileReader.onprogress : 处理progress事件。该事件在读取Blob时触发。

3.3 实例方法

FileReader.abort():终止读取操作,readyState 属性将变成2。FileReader.readAsArrayBuffer():以 ArrayBuffer 的格式读取文件,读取完成后 result 属性将返回一个 ArrayBuffer 实例。FileReader.readAsBinaryString():读取完成后, result 属性将返回原始的二进制字符串。FileReader.readAsDataURL():读取完成后, result 属性将返回一个 Data URL 格式(Base64 编码)的字符串,代表文件内容。

对于图片文件,这个字符串可以用于<img>元素的 src 属性。注意,这个字符串不能直接进行 Base64 解码,必须把前缀 data:*/*;base64 ,从字符串里删除以后,再进行解码。

FileReader.readAsText():读取完成后, result 属性将返回文件内容的文本字符串。

该方法的第一个参数是代表文件的 Blob 实例,第二个参数是可选的,表示文本编码,默认为 UTF-8。

4. 兼容性


5. 实例

这里举一个图片预览的实例:

/* HTML 代码如下
  <input type="file" onchange="previewFile()">
  <img src="" height="200">
*/

function previewFile() {
  let preview = document.querySelector('img');
  let file    = document.querySelector('input[type=file]').files[0];
  let reader  = new FileReader();

  reader.addEventListener('load', function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

四、参考资料

《File 对象,FileList 对象,FileReader 对象》MDN
本文首发在 pingan8787个人博客

链接: https://fly63.com/article/detial/6911

JavaScript中创建对象的7种模式

ECMA-262把对象定义为:”无需属性的集合,其属性可以包含基本值、对象或者函数。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。正因为这样,我们可以把ECMAScript的对象想象成散列表:无非就是一组名对值,其中值可以是数据或函数。

JavaScript数组、对象合并的多种方法实现

这篇文章讲解Js数组和对象的一些使用技巧,如何将不同的数组,对象合并/结合为1个的方法

Js通过.或者[]访问对象属性的语法、性能等区别

在JavaScript中可以使用 . 或者 [ ] 来访问对象的属性,但是对象中方法只能通过 . 来获取;使用.运算符来存取对象的属性的值。或者使用[]作为一个关联数组来存取对象的属性。但是这两种方式有什么区别了?

js中关于for...in遍历对象属性的顺序问题

对象使用obj.length时,它得到的值是undefined的,所以只能通过for...in循环获取对象的属性,我们发现并没有按属性的顺序显示,而且顺序在各个浏览器下显示也不同。 这是为什么呢?

JS声明对象时属性名加引号与不加引号的问题

JS声明对象时属性名加引号与不加引号的问题,一般情况下属性名加引号和不加引号是都可以的,效果是一样的。如果属性名是数字,则必须用“”包围,并且用 [] 方括号访问。

javascript的本地对象,内置对象和宿主对象

javascript的原生对象:也叫内部对象、本地对象、native object;内置对象:Global(全局对象)、Math ;宿主对象:有宿主提供的对象,在浏览器中window对象以及其下边所有的子对象(如bom、dom等等),在node中是globla及其子对象,也包含自定义的类对象。

JavaScript 判断对象中是否有某属性

判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式。一点( . )或者方括号( [ ] )、二in 运算符、三hasOwnProperty()。三种方式各有优缺点,不同的场景使用不同的方式,有时还需要结合使用

JavaScript Error对象详解

error,指程序中的非正常运行状态,在其他编程语言中称为“异常”或“错误”。解释器会为每个错误情形创建并抛出一个Error对象,其中包含错误的描述信息。

如何禁止JavaScript对象重写?

由于JavaScript的灵活性,我们可以轻易地重写(override)一些于其他人定义的对象(object)。换句话说,任何人都可以重写我们所定义的对象。这是一个非常强大的特性,许多开发者都有兴趣试试,来拓展或者修改某些对象的行为。

JavaScript面向对象编程中_优雅的类写法

虽然现在已经是ES6的时代,但是,还是有必要了解下ES5是怎么写一个类的。本文详述JavaScript面向对象编程中的类写法,并分步骤讲述如何写出优雅的类。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!