在 Web 开发中，文件上传是一个非常常见的需求。通过表单提交文件，用户可以上传图片、文档、视频等各种类型的文件。在前端开发中，我们通常会使用<input type="file">标签来实现文件上传功能。
1. <input type="file">标签
<input type="file">标签是用来创建文件上传控件的标签，用户可以通过点击该控件选择本地文件进行上传。该标签有一些常用的属性，可以帮助我们控制文件上传的行为。
1.1. accept属性
accept属性用来限制用户可以选择的文件类型。可以设置为一个或多个 MIME 类型，以逗号分隔。例如，如果我们只允许用户上传图片文件，可以设置accept="image/*"。
示例代码：
------ ----------- -----------------
1.2. multiple属性
multiple属性用来指定是否允许用户选择多个文件进行上传。默认情况下，用户只能选择一个文件进行上传。设置multiple属性后，用户可以通过按住Ctrl键或Command键来选择多个文件。
示例代码：
------ ----------- ---------
1.3. disabled属性
disabled属性用来禁用文件上传控件，用户无法点击该控件进行文件选择。
示例代码：
------ ----------- ---------
2. FormData 对象
在实际开发中，我们通常会使用FormData对象来处理表单数据，包括文件上传。FormData对象允许我们通过 JavaScript 来模拟表单提交，可以方便地上传文件。
2.1. 创建 FormData 对象
我们可以通过new FormData()来创建一个空的FormData对象，然后使用append()方法来添加表单数据。
示例代码：
----- -------- - --- ----------- ----------------------- --------------------
2.2. 使用 XMLHttpRequest 发送 FormData
一旦我们创建了FormData对象并添加了表单数据，我们可以使用XMLHttpRequest对象来发送该数据到后端服务器。
示例代码：
----- --- - --- ----------------- ---------------- ---------- ------ -------------------
3. Fetch API
除了使用XMLHttpRequest发送 FormData，我们还可以使用现代的 Fetch API 来处理文件上传。Fetch API 提供了更简洁的方式来发送网络请求。
3.1. 使用 Fetch API 上传文件
我们可以直接将FormData对象传递给fetch()方法来发送文件上传请求。
示例代码：
---------------- - ------- ------- ----- -------- ---
4. 总结
通过以上介绍，我们了解了如何使用<input type="file">标签来创建文件上传控件，并通过FormData对象来处理文件上传。同时，我们还学习了如何使用XMLHttpRequest和 Fetch API 来发送文件上传请求。希望本文能帮助你更好地处理文件上传功能。