引言
在现代 web 开发中，前端上传文件的需求越来越普遍。如果直接将文件作为表单的一部分，虽然操作简单，但无法异步传输数据。为了避免阻塞UI线程，更好的方法是将文件异步上传到服务器。本篇文章将会详细地介绍如何使用 JavaScript 发送异步文件上传请求到 RESTful API，旨在提供深度的学习和指导意义。
前置基础
在开始本文之前， 首先需要一些必要的前端基础技能。这包括熟练掌握 JavaScript 编程语言、熟悉 HTTP 协议和理解 RESTful API 等相关知识。此外，我们还需要掌握 FormData API 以及 XMLHttpRequest API。
- FormData：提供了一种简单易用的方式来组装文本和二进制数据并将其用于 XMLHttpRequest 送出。所有表单字段都可以异步传输，甚至包括文件上传。
- XMLHttpRequest：XMLHttpReequest 对象能够像服务器发送请求并处理响应。当然不仅限于 XML
实现步骤
步骤 1: HTML 代码
首先，我们需要在网页上创建一个表单，其中包含一个文件上传的 input 元素，并为其添加 id 属性和监听 change 事件的监听器。
<form> <input type="file" id="myFileInput" onchange="handleFileSelect()" /> <button type="submit">Upload</button> </form>
说一下后者的监听器：
-- -------------------- ---- -------
-------- ------------------ -
----- ---------- - ---------------------------------------
----- ----- - -----------------
-- ------------- - -- -
----- -------- - --- -----------
------------------------- ----------
---------------------
-
-通过 FormData 对象将文件按照 HTTP 请求体标准格式进行组合。将上传函数传入 FormData 对象开始上传。
步骤 2：编写上传文件处理函数
接下来，我们需要编写 JavaScript 代码来处理文件上传操作。 在这个过程中用到了 XMLHttpRequest 对象这个 HTTP 客户端API。这个API通过open() 方法打开与服务器的连接，send() 方法向服务器发送请求。
-- -------------------- ---- -------
-------- -------------------- -
----- --------- - ---------------------------------
----- --- - --- -----------------
---------------- ---------- ------
---------- - -------- -- -
-- ----------- --- ---- -
----------------- -------- ----------------
- ---- -
----------------- ----- ------------
-
--
-------------------
-在这个函数中，我们首先定义了服务器的 URL，然后创建了一个XMLHttpRequest对象，用于向服务器发送请求。接下来，我们使用 open() 方法打开与服务器之间的连接，同时设置发送数据的类型。最后，我们通过 send() 方法将 FormData 对象发送到服务器。在上传文件完成之后，XMLHttpRequest 对象的 onreadystatechange 事件会被触发，我们可以在这个事件处理程序中对接收到的响应进行处理。
步骤 3: 测试上传程序
最后一步，让我们测试上传程序。
在本地文件系统中选择一个文件并在表单中提交。你应该能够在控制台中看到我们处理程序中打印出的相应信息。
总结
本篇文章详细介绍如何在浏览器中实现异步上传文件到 RESTful API。我们简单了解了 FormData、XMLHttpRequest和HTTP请求，最后通过构造 FormData 对象和使用 XMLHttpRequest对象以 HTTP POST 方法向服务器发送数据完成了上传操作。本文的目标是帮助初学者熟练使用以上功能，进一步提高自己的前端编程技能。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----------- ------ ---------------
-------
------
-------- ------ ------------
------
------ ----------- ---------------- ----------------------------- --
------- -----------------------------
-------
--------
-------- ------------------ -
----- ---------- - ---------------------------------------
----- ----- - -----------------
-- ------------- - -- -
----- -------- - --- -----------
------------------------- ----------
---------------------
-
-
-------- -------------------- -
----- --------- - ---------------------------------
----- --- - --- -----------------
---------------- ---------- ------
---------- - -------- -- -
-- ----------- --- ---- -
----------------- -------- ----------------
- ---- -
----------------- ----- ------------
-
--
-------------------
-
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486e3c748841e98945818b8