在现代 Web 应用程序中，文件上传是一个非常常见的功能。但是，当用户上传多个文件时，如何同时跟踪每个文件的上传状态？使用 AngularJS，我们可以轻松地实现这一点。
HTML
首先，我们需要在 HTML 中设置一个文件输入字段：
------ ----------- -------- ---------------- -------------------------
ng-model 属性将选择的文件存储在 $scope.files 变量中。fileread 属性是一个自定义指令，它告诉 AngularJS 在上传文件后执行 upload 函数。
自定义指令
下一步，我们需要创建 fileread 指令。该指令负责将选择的文件读取到 JavaScript 中，并在上传文件时更新文件的状态。
------------------------- ---------------- -
------ -
--------- ----
----- --------------- -------- ------ -
--- ----- - -----------------------
--- ----- - ---
---------------------- ---------- -
--- ---- - - -- - - ------------------------ ---- -
------------
----- -------------------------
----- -------------------------
----------- --
------- ---------
---
-
----------------------- -
------------------- -------
---
---
-
--
---与其他指令类似，fileread 指令需要一个指令名称、限制和链接函数。链接函数获取文件输入元素的值，并将其存储在 $scope.files 变量中。
另外，我们还需要定义一个数组来存储每个文件的状态，包括文件名、大小、百分比和当前状态（挂起、上传中或已上传）。在文件选择时，我们可以通过循环遍历所有文件并将它们添加到该数组中。
最后，我们使用 $apply() 函数将变量 files 分配给 $scope.files 变量，这样我们就可以在控制器中使用它。
控制器
现在，我们需要编写一个控制器来处理文件上传逻辑并实时更新每个文件的状态。
---------------------------------- ---------------- ------ -
------------- - --------------- -
--- ---- - - -- - - ------------- ---- -
---------------------
-
--
--- ---------- - -------------- -
--- --- - -------------
--- --- - --- -----------------
--- -------- - --- -----------
-- ----------
----------------------- ------
-- ------------
----------- - ------------
-- --------
--------------------------------------- --------------- -
-- ------------------------ -
--- --------------- - ----------------------- - ----------- - -----
--------------- - ----------------
----------------
-
-- -------
-- ------
---------------------------- --------------- -
----------- - -----------
----------------
-- -------
-- -- ---- --
---------------- ---- ------
-------------------
--
---在控制器中，我们定义了一个 upload 函数，它遍历 $scope.files 数组并将每个文件传递给 uploadFile 函数。
在 uploadFile 函数中，我们使用 XMLHttpRequest 对象执行 AJAX 请求。我们还添加了一个事件监听器来实时更新每个文件的百分比，并在文件上传完成后将其状态更新为“已上传”。
HTML 模板
最后，我们需要在 HTML 中显示每个文件的状态和进度。
-------
-------
----
-------- ---------
-------- ---------
---------------
-----------------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------