文件操作基础概念

文件篇：前端文件操作概念与 API 详解

在前端开发中，文件上传和下载是常见的功能，理解文件操作过程中涉及的概念和 API 至关重要。

文件对象： 用户通过 <input type="file"> 元素选择文件时，浏览器会创建 File 对象来表示该文件。File 对象包含有关文件的信息，如名称、大小、类型等。

Blob 对象： Blob 对象表示一个不可变的原始二进制数据块，常用于表示文件或图像。它提供了一种灵活的方式来处理二进制数据，而不必将其存储在文件系统中。

FileReader 对象： FileReader 对象用于读取 File 或 Blob 对象中的内容。它支持异步读取，读取结果可通过回调函数或 Promise 获取。

FormData 对象： FormData 对象是一种特殊的对象，用于以 multipart/form-data 格式发送数据。它允许将文件与表单字段一起发送到服务器。

AJAX 和 XHR： AJAX（异步 JavaScript 和 XML）是使用 XMLHttpRequest (XHR) 对象执行异步请求的技术。它允许前端与服务器进行数据交换，而无需刷新页面。

<input type="file"> 元素： 此元素允许用户从本地计算机选择文件。

API

<input type="file"> 相关的 API：

• accept：指定接受的文件类型。
• multiple：允许选择多个文件。
• webkitdirectory：允许选择目录（仅限 Webkit 浏览器）。

Blob 对象相关的 API：

• slice()：从 Blob 对象中截取一部分数据。
• arrayBuffer()：将 Blob 对象转换为 ArrayBuffer。
• text()：将 Blob 对象转换为文本。

FileReader 对象相关的 API：

• readAsArrayBuffer(blob)：将 Blob 对象转换为 ArrayBuffer。
• readAsBinaryString(blob)：将 Blob 对象转换为二进制字符串。
• readAsText(blob)：将 Blob 对象转换为文本。

FormData 对象相关的 API：

• append(key, value)：添加一个键值对到 FormData 对象。
• append(key, file)：添加一个文件到 FormData 对象。

AJAX 和 XHR 相关的 API：

• XMLHttpRequest.open()：打开一个 HTTP 请求。
• XMLHttpRequest.send()：发送一个 HTTP 请求。
• XMLHttpRequest.onload()：在请求成功时触发事件处理程序。
• XMLHttpRequest.onerror()：在请求失败时触发事件处理程序。

---