在前端开发中，常常需要实现文件上传功能。传统的方式是使用 <form> 标签提交表单，但这种方式会刷新整个页面，用户体验不够友好。而使用 Ajax 文件上传可以无需刷新页面，实现异步上传，提升用户体验。
什么是Ajax文件上传
Ajax 文件上传是通过 JavaScript 和 XMLHttpRequest 对象来实现的。它可以在不刷新页面的情况下将表单数据和文件异步地发送到服务器。这种方式可以让用户在上传文件时不必等待整个页面刷新，大大提升了用户体验。
Ajax 文件上传流程
Ajax 文件上传的流程如下：
- 用户选择要上传的文件。
- JavaScript 将选择的文件添加到 FormData 对象中。
- 使用 XMLHttpRequest 对象发送 FormData 对象到服务器。
- 服务器处理请求并返回响应。
- JavaScript 处理响应结果。
实现步骤
HTML
首先，我们需要在 HTML 中创建一个上传表单，并为其添加一个 ID。在这个例子中，我们使用了一个简单的表单，只包含一个输入框和一个上传按钮。
<form id="uploadForm"> <input type="file" name="file"> <button type="submit">上传</button> </form>
JavaScript
接下来，我们使用 JavaScript 来实现 Ajax 文件上传。
1. 监听表单提交事件
当用户点击上传按钮时，触发表单提交事件。我们需要监听表单提交事件，并阻止默认的表单提交行为。
const form = document.querySelector('#uploadForm');
form.addEventListener('submit', function(e) {
e.preventDefault();
});2. 获取文件信息
使用 FormData 对象来获取表单中的文件信息，然后将其发送到服务器。
const formData = new FormData(form);
3. 创建 XMLHttpRequest 对象
创建一个 XMLHttpRequest 对象来发送请求，并设置请求类型和 URL。
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);4. 监听上传进度和状态变化
监听上传进度和状态变化，并分别处理它们。
-- -------------------- ---- -------
--------------------- - ----------- -
----- ------- - -------------------- - -------- - -----
--------------------- --------------
--
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
------------------- ------------
-
--5. 发送请求
最后，发送请求并将表单数据和文件上传到服务器。
xhr.send(formData);
完整示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ------------
-------
------
----- ----------------
------ ----------- ------------
------- -------------------------
-------
--------
----- ---- - --------------------------------------
------------------------------- ----------- -
-------------------
----- -------- - --- ---------------
----- --- - --- -----------------
---------------- ---------- ------
--------------------- - ----------- -
----- ------- - -------------------- - -------- - -----
--------------------- --------------
--
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
------------------- ------------
-
--
-------------------
---
---------
-------
-------总结
本文介绍了如何使用 Ajax 文件上传表单，它可以提升用户体验并避免页面刷新。通过学习这个技术，你可以更好地掌握前端开发，并为用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10180
