在前端开发中，经常需要上传图片到服务器上。AngularJS是一个非常流行的JavaScript框架，它提供了一系列丰富的指令和服务来帮助我们开发Web应用程序。其中，ng-upload指令可以帮助我们实现图片上传功能，本文将详细介绍如何在AngularJS中使用ng-upload指令来上传图片。
安装依赖
首先，需要安装ng-upload以及其它必需的依赖：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script> <script src="https://cdn.rawgit.com/danialfarid/ng-file-upload/master/dist/ng-file-upload-shim.min.js"></script> <script src="https://cdn.rawgit.com/danialfarid/ng-file-upload/master/dist/ng-file-upload.min.js"></script>
创建HTML模板
接下来，我们需要创建一个HTML模板，在该模板中包含一个文件选择器和一个上传按钮：
<div ng-app="myApp" ng-controller="myCtrl"> <input type="file" ngf-select ng-model="file" name="file"/> <button ng-click="upload()">上传</button> </div>
这里使用了ngf-select指令来允许用户选择文件，并使用ng-model指令来将所选文件的信息保存到file变量中。同时，为了触发上传操作，我们添加了一个上传按钮，并绑定了upload()函数。
创建控制器
在AngularJS中，我们需要使用控制器来实现业务逻辑。因此，我们需要创建一个控制器，并在其中定义upload()函数：
-- -------------------- ---- -------
--- --- - ----------------------- ------------------
------------------------ ---------- --------- ---------------- ------- -
------------- - ---------- -
---------------
---- ----------
----- ------ ------------
-------------------------- -
-------------------- - - ------------------------------ - ---------- --------- - - ---------------
-- ------------------ -
------------------ ------- - - -----------------
-- ------------- -
--- ------------------ - -------------- - ---------- - -----------
---------------------- - - ------------------ - -- - - ---------------------------
---
--
----这里我们将ng-upload模块注入到应用程序中，并将其作为依赖项传递给控制器。然后，在控制器的代码中，我们定义了一个upload()函数，该函数使用Upload.upload()方法来上传所选文件。我们还添加了一些回调函数，以获取上传进度和响应信息。
启动应用程序
最后，我们需要启动应用程序，以便AngularJS可以执行我们编写的代码：
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});完整示例代码
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
---------------- ------ ----- ---- -----------------
------- ------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------------
-------
----- -----------------------
------ ----------- ---------- --------------- -------------
------- -------------------------------
--------
--- --- - ----------------------- ------------------
------------------------ ---------- --------- ---------------- ------- -
------------- - ---------- -
---------------
---- ----------
----- ------ ------------
-------------------------- -
-------------------- -
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------