JavaScript 中对 File 的操作108

在 JavaScript 中，File 对象代表一个包含文件数据的对象。它提供了对文件内容、名称、大小和类型的访问，以及对文件进行读取和写入的能力。

创建 File 对象

可以通过以下方法创建 File 对象：
从 FileList 中获取：当用户通过 元素选择文件时，可以通过 .files 属性获取 FileList，其中包含所选文件的 File 对象。
从拖放事件中获取：当文件拖放到网页上时，可以通过事件对象中的 . 属性获取 File 对象。
从 Blob 对象创建：Blob 对象代表二进制数据，可以通过 构造函数或 方法创建。可以通过 构造函数将 Blob 对象转换为 File 对象。

File 对象属性

File 对象包含以下属性：
name：文件的名称
size：文件的字节大小
type：文件的 MIME 类型，例如 "text/plain" 或 "image/jpeg"
lastModified：文件最后修改的时间戳

文件读取

可以使用以下方法读取文件内容：
()：将文件内容作为文本字符串读取。
()：将文件内容作为 ArrayBuffer 对象读取。
()：将文件内容作为 base64 编码的数据 URL 读取。

使用 FileReader API 时，需要监听以下事件：
load：表示文件内容已成功读取。
error：表示在读取文件时发生错误。
progress：提供了有关文件读取进度的信息。

文件写入

要将数据写入文件，可以使用以下方法：
()：从现有的 Blob 对象创建一个新的 Blob 对象，指定要从中提取数据的起始和结束字节。
FormData：FormData 对象可以将文件与其他表单数据一起发送到服务器。通过 方法添加文件。

示例

以下是一个读取文件的示例，并将其内容显示在网页上：```javascript
const input = ('input[type="file"]');
('change', (event) => {
const file = [0];
const reader = new FileReader();
= () => {
const content = ;
// 将文件内容显示在网页上
};
(file);
});
```

JavaScript 中的 File 对象提供了对文件数据、名称、大小和类型的访问，以及对文件进行读取和写入的能力。使用 FileReader API 可以轻松读取文件内容，而 () 和 FormData 对象可用于将数据写入文件。理解这些概念对于在 JavaScript 中处理文件非常重要。

2024-12-16

上一篇：JavaScript 函数返回

下一篇：探索 JavaScript 的世界：深入浅出的示例