在前端开发中，我们经常会需要上传文件或者提交多部分表单数据。本文将介绍如何使用 AngularJS 实现这一功能，并提供详细的指导和示例代码。
前置知识
在开始之前，我们需要了解一些基础知识：
- AngularJS：一个流行的 JavaScript 框架，用于构建动态 web 应用。
- FormData：一个原生的 JavaScript API，用于创建表单数据以便传输到服务器上。
- XMLHttpRequest（XHR）：一种在浏览器中发送 HTTP 请求的 API。
步骤
以下是在 AngularJS 中上传多部分表单数据和文件的步骤：
1. 创建表单数据对象
我们可以使用 FormData API 来创建表单数据对象。FormData 对象允许我们按照表单域的名称添加字段和值，同时还支持添加文件。
----- -------- - --- ----------- --------------------------- -------- ------------------------ -------------------- ------------------------- ------
在上面的示例中，我们添加了三个字段：username、email 和 avatar。其中，avatar 字段是一个文件对象，它将被上传到服务器。
2. 发送请求
我们可以使用 XMLHttpRequest（XHR）API 来发送 AJAX 请求并上传表单数据和文件。下面是一个简单的示例：
----- --- - --- ----------------- ---------------- ----------- -------------------
在上面的示例中，我们使用 POST 方法将表单数据和文件上传到 /upload 路径。使用 send() 方法发送请求。
3. 处理响应
当服务器返回响应时，我们可以使用 XMLHttpRequest 对象的 onload 事件来处理响应：
---------- - ---------- -
-- ----------- --- ---- -
---------------------
- ---- -
---------------------
-
--在上面的示例中，我们检查响应的状态码是否为 200。如果是，表示上传成功；否则，表示上传失败。
示例代码
以下是一个完整的 AngularJS 控制器示例，它演示了如何上传多部分表单数据和文件：
---------------------------------- ---------- ---------------- -
------------------ - ----------------- -
------------------------ -
------------ - --------------
---
--
------------- - ---------- -
----- -------- - --- -----------
--------------------------- -----------------
------------------------ --------------
------------------------- -----------------
----- --- - --- -----------------
---------------- -----------
---------- - ---------- -
-- ----------- --- ---- -
---------------------
- ---- -
---------------------
-
--
-------------------
--
----在上面的示例中，我们创建了一个名为 UploadController 的 AngularJS 控制器。它包含了两个方法：fileChanged() 和 upload()。
在 fileChanged() 方法中，我们使用 $scope.$apply() 来更新作用域中的文件对象。在 upload() 方法中，我们创建了一个 FormData 对象，并将其附加到 XMLHttpRequest 对象上，然后发送请求并处理响应。
总结
在本文中，我们介绍了如何使用 AngularJS 实现上传多部分表单数据和文件。首先，我们创建了一个 FormData 对象，然后使用 XMLHttpRequest API 发送 AJAX 请求并将数据上传到服务器。最后，我们演示了一个完整的 AngularJS 控制器示例，以帮助您更好地理解这个过程。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29669