参考资料：
Github：
简单案例：
带图片预览案例：
一、上传多个图片，选择后手动触发上传：
（1）引用相关文件
（2）Html代码
（3）JS代码
//在模块中引用 var app = angular.module('appMain', ['angularFileUpload']);//在控制器中引用 app.controller('ctrlMain', function ($scope, $rootScope, $http, $window, $location, $log, FileUploader) { //=======UpLoaderPhotos相关 Start======// var uploaderPhotos = $scope.uploaderPhotos = new FileUploader({ url: "/HandlerApi.GetApiJson.tclywork?ApiPath=Test/Get" }); $scope.uploaderPhotos.AllowAdd = true;//自己添加的，用于限制上传数量 $scope.uploaderPhotos.onAfterAddingFile = function (fileItem) { while (this.queue.length > 5) { this.removeFromQueue(0); } this.AllowAdd = (this.queue.length < 5); console.log(this); }; //自己添加的，用于在移除图片时，重新计算 $scope.uploaderPhotos.funcRemoveItem = function (fileItem) { fileItem.remove(); this.AllowAdd = (this.queue.length < 5); console.log(this); }; //保存图片 $scope.funcSaveCompanyInfo = function () { //先判断是否有未上传完成的图片，若有先传图片，否则直接上传表单数据 if (uploaderPhotos.getNotUploadedItems().length > 0) { uploaderPhotos.uploadAll(); } else { } } //上传控件：回调响应： $scope.uploaderPhotos.onBeforeUploadItem = function (item) { item.formData = [{ Desc: item.file.Desc }];//上传前，添加描述文本 console.log("onBeforeUploadItem："); console.log(item.formData); } //上传控件：回调响应： $scope.uploaderPhotos.onCompleteItem = function (item,response,status,headers) { console.log("onCompleteItem " + JSON.stringify(response)); // if (response.code == "200") { $scope.modelPosition.Images += response.data.id; } console.log($scope.modelPosition.Images); }; //上传控件：回调响应： $scope.uploaderPhotos.onCompleteAll = function () { console.log("CompleteAll"); funcSaveCompanyInfoFormData(); }}
（4）后台代码（略）
二、上传单个图片，选择后立即上传：
（1）引用相关文件（参见上）
（2）Html代码
（3）JS代码
//在模块中引用 var app = angular.module('appMain', ['angularFileUpload']);//在控制器中引用 app.controller('ctrlMain', function ($scope, $rootScope, $http, $window, $location, $log, FileUploader) { //=======UpLoaderResume相关 Start======// var uploaderResume = $scope.uploaderResume = new FileUploader({ url: "/HandlerApi.GetApiJson.tclywork?ApiPath=Test/Get", autoUpload: true,//添加后，自动上传 }); // $scope.uploaderResume.onAfterAddingFile = function (fileItem) { console.log("onAfterAddingFile"); console.log(fileItem); console.log(this); }; // $scope.uploaderResume.onBeforeUploadItem = function (fileItem) { console.log("onBeforeUploadItem"); }; // $scope.uploaderResume.onCompleteItem = function (fileItem, response, statu, headers) { console.log("onCompleteItem"); console.log(response); };}
（4）后台代码（略）