在前端开发中，文件上传是一项常见的任务。通常情况下，我们会使用 AJAX 技术来实现异步上传文件，以避免页面刷新和用户体验差的问题。本文将介绍如何使用 AJAX 实现异步上传文件。
前置知识
在开始之前，需要了解以下几个概念：
- FormData：用于创建表单数据对象，可用于构造 HTTP 请求体。
- XMLHttpRequest：用于发送 HTTP 请求和接收响应数据的 JavaScript 对象。
- FileReader：用于读取本地文件内容的 JavaScript 对象。
实现步骤
- 创建一个 input 元素用于选择文件，并监听其 change 事件，在事件处理函数中获取选中的文件对象。
<input type="file" id="file-input">
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', () => {
const file = fileInput.files[0];
// 处理文件
});- 使用 FormData 构造 HTTP 请求体，将文件添加到表单数据中。
const formData = new FormData();
formData.append('file', file);- 创建 XMLHttpRequest 对象，设置请求方法、请求地址、是否异步等属性，发送 HTTP 请求。
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formData);- 监听 XMLHttpRequest 对象的readystatechange事件，在事件处理函数中判断响应状态和响应内容，完成文件上传。
-- -------------------- ---- -------
---------------------- - -- -- -
-- --------------- --- -- - -- -----
-- ----------- --- ---- - -- ------
----------------------
- ---- - -- ----
------------------------
-
-
--完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
-------
------
------ ----------- ----------------
--------
----- --------- - --------------------------------------
------------------------------------ -- -- -
----- ---- - -------------------
----- -------- - --- -----------
----------------------- ------
----- --- - --- -----------------
---------------- ---------- ------
-------------------
---------------------- - -- -- -
-- --------------- --- -- -
-- ----------- --- ---- -
----------------------
- ---- -
------------------------
-
-
--
---
---------
-------
-------总结
本文介绍了如何使用 AJAX 实现异步上传文件，需要注意以下几个关键点：
- 使用 FormData 构造 HTTP 请求体。
- 设置 XMLHttpRequest 对象的属性和事件处理函数。
- 监听 XMLHttpRequest 对象的 readyStateChange 事件，判断响应状态和响应内容。
希望本文对大家在前端开发中实现文件上传有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/7145