山东大学程序设计能力提升平台 File用法

最新推荐文章于 2024-08-30 11:12:09 发布

Kätzchen-408

最新推荐文章于 2024-08-30 11:12:09 发布

阅读量268

点赞数

分类专栏：山东大学文章标签：前端

本文链接：https://blog.csdn.net/weixin_45842078/article/details/122163322

版权

山东大学专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了HTML5中的File API，包括File对象的构造函数、实例属性和方法，以及FileList和FileReader对象的详细信息，重点讲解了如何读取和处理用户选择的文件。

摘要由CSDN通过智能技术生成

2021SC@SDUSC

File

File 对象代表一个文件，用来读写文件信息。它继承了 Blob 对象，或者说是一种特殊的 Blob 对象，所有可以使用 Blob 对象的场合都可以使用它。

最常见的使用场合是表单的文件上传控件（），用户选中文件以后，浏览器就会生成一个数组，里面是每一个用户选中的文件，它们都是 File 实例对象

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

构造函数:

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

参数:
array：一个数组，成员可以是二进制对象或字符串，表示文件的内容。
name：字符串，表示文件名或文件路径。
options：配置对象，设置实例的属性。该参数可选。

实例属性和实例方法

File.lastModified：最后修改时间
File.name：文件名或文件路径
File.size：文件大小（单位字节）
File.type：文件的 MIME 类型

FileList

FileList对象是一个类似数组的对象，代表一组选中的文件，每个成员都是一个 File 实例。
myFileList[0]返回文件队列的第一个文件

FileReader

FileReader 对象用于读取 File 对象或 Blob 对象所包含的文件内容。

实例属性

FileReader.error：读取文件时产生的错误对象
FileReader.readyState：整数，表示读取文件时的当前状态。一共有三种可能的状态，0表示尚未加载任何数据，1表示数据正在加载，2表示加载完成。
FileReader.result：读取完成后的文件内容，有可能是字符串，也可能是一个 ArrayBuffer 实例。
FileReader.onabort：abort事件（用户终止读取操作）的监听函数。
FileReader.onerror：error事件（读取错误）的监听函数。
FileReader.onload：load事件（读取操作完成）的监听函数，通常在这个函数里面使用result属性，拿到文件内容。
FileReader.onloadstart：loadstart事件（读取操作开始）的监听函数。
FileReader.onloadend：loadend事件（读取操作结束）的监听函数。
FileReader.onprogress：progress事件（读取操作进行中）的监听函数。