基于Angularjs实现图片上传和下载

　　根据ng-file-uoload实现文件上传和下载实现

　　网上down下来ng-file-uoload.js，在项目中记得引入服务哦。

　　示例代码：

　　　　　　　　

　　　　FileUploaderCtrl.$inject = ["$scope","$FileUploader"];
　　　　　　function FileUploaderCtrl($scope,$FileUploader) {
　　　　　　　　var uploader = $scope.uploader = new $FileUploader({
　　　　　　　　　　url: '/file/upload.do'
　　　　　　　　});
　　　　　　// FILTERS
　　　　　　uploader.filters.push({
　　　　　　name: 'customFilter',
　　　　　　fn: function (item /*{File|FileLikeObject}*/, options) {
　　　　　　　　return this.queue.length < 10;
　　　　　　}
　　　　　　});
　　　　// CALLBACKS

　　　　uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
　　　　　　console.info('onWhenAddingFileFailed', item, filter, options);
　　　　};
　　　　uploader.onAfterAddingFile = function (fileItem) {
　　　　　　console.info('onAfterAddingFile', fileItem);
　　　　};
　　　　uploader.onAfterAddingAll = function (addedFileItems) {
　　　　　　console.info('onAfterAddingAll', addedFileItems);
　　　　};
　　　　uploader.onBeforeUploadItem = function (item) {
　　　　　　console.info('onBeforeUploadItem', item);
　　　　};
　　　　uploader.onProgressItem = function (fileItem, progress) {
　　　　　　console.info('onProgressItem', fileItem, progress);
　　　　};
　　　　uploader.onProgressAll = function (progress) {
　　　　　　console.info('onProgressAll', progress);
　　　　};
　　　　uploader.onSuccessItem = function (fileItem, response, status, headers) { //上传成功
　　　　　　console.info('onSuccessItem', fileItem, response, status, headers);
　　　　};
　　　　uploader.onErrorItem = function (fileItem, response, status, headers) {
　　　　　　console.info('onErrorItem', fileItem, response, status, headers);
　　　　};
　　　　uploader.onCancelItem = function (fileItem, response, status, headers) {
　　　　　　console.info('onCancelItem', fileItem, response, status, headers);
　　　　};
　　　　uploader.onCompleteItem = function (fileItem, response, status, headers) { //上传成功
　　　　　　console.info('onCompleteItem', fileItem, response, status, headers);
　　　　};
　　　　uploader.onCompleteAll = function () {
　　　　　　console.info('onCompleteAll');
　　　　};

　　　　　　console.info('uploader', uploader);
　　　　};
　　　　/*
　　　　* uploader.onSuccessItem
　　　　* uploader.onCompleteItem
　　　　* 根据这两个函数即可获取到相应的返回状态
　　　　*
　　　　*/

　　　　Html中也要有相应的更改：

　　　　　　<input type="file" name="****" value="****" nv-file-select="" uploader="uploader"/>

　　　　ps:有需要js文件的可以联系我

　　　　实际开发代码 ：

　　　　var uploader2 = $scope.uploader2 = new FileUploader({
　　　　　　url:$scope.$serverPath+'BatchFileUpload.do'
　　　　});

　　　　uploader2.onAfterAddingFile = function(fileItem) {
　　　　　　$scope.fileName = fileItem.file.name;
　　　　　　if($scope.uploader2.queue&&$scope.uploader2.queue.length>1){
　　　　　　　　for(var i=0;i<$scope.uploader2.queue.length-1;i++){
　　　　　　　　　　$scope.uploader2.queue[i].remove();
　　　　　　　　}
　　　　　　}
　　　　};

　　　　

　　　　//文件上传
　　　　$scope.submitPre1 = function () {
　　　　　　if (!parseFloat($scope.totalAmount)>0) {
　　　　　　　　$scope.alert("转账金额不能为0！");
　　　　　　　　return false;
　　　　　　}
　　　　$scope.uploader2.onBeforeUploadItem= function(item){
　　　　　　item.alias='UploadFile';

　　　　　　item.formData = [{"FileName":FileName}
　　　　　　　　　　]
　　　　　}
　　　　};
　　　　uploader2.onSuccessItem = function(fileItem, response, status, headers) {
　　　　　　if(response.jsonError) {
　　　　　　　　$scope.confirm(response.jsonError[0]["_exceptionMessage"],function(){$state.reload()},function(){$state.reload()});
　　　　　　} else {
　　　　　　　　$scope.queryList();
　　　　　　}
　　　　};
　　　　var length = $scope.uploader2.queue.length;
　　　　var a = $scope.uploader2.queue[length-1];
　　　　if(a){
　　　　　　a.upload();
　　　　}else{
　　　　　　$scope.alert("请选择文件")
　　　　}

　　};