springMVC+bootstrap+angularJS(angular-file-upload控件)实现的文件上传

最近有个项目需求是上传文件，一般是压缩包。上传到服务器进行进一步的操作。且需要支持单、多文件上传
由于项目一直使用的是angularjs写的前端，所有学习研究了下它自己的上传插件，写了个demo。简单记录一下，留作笔记

angular-file-upload

插件的GitHub地址：点击跳转
api地址：点击跳转
官方案例：点击跳转

大部分逻辑都在代码注解中体现出来，不在累赘。直接贴代码

代码

1 . 未使用angular-file-upload控件

	
		

			
			

				

					

						

							
							

								
文件上传测试
								

								

									

										

											
										
									
									

										

											
												 上传
											
										
									
								
							
							
						
					
				
			
		

这是没使用上传插件编写的文件上传，核心是

        
        
        

		
        
        
        
        
        

        

    
    
    

        

            


                


                    
选择文件
                    多文件
                    


                    单文件
                    
                

                


                    
上传队列
                    
队列长度: {{ uploader.queue.length }}

                    

                        

                            

                                
Name
                                
尺寸
                                
进展
                                
状态
                                
操作
                            
                        
                        

                            

                                
{{ item.file.name }}
                                
{{ item.file.size/1024/1024|number:2 }} MB
                                

                                    

                                        

                                    
                                
                                

                                    
                                    
                                    
                                
                                

                                    
                                         上传
                                    
                                    
                                         取消
                                    
                                    
                                         移除
                                    
                                
                            
                        
                    

                    

                        

                            队列进度:
                            

                                

                            
                        
                        
                             上传全部
                        
                        
                             全部取消
                        
                        
                             移除所有
                        
                    

                

            

        

    

注意看里面的注解

此案例是依据官网提供的demo，再理解使用的时候加上自己的注释然后调用自己后台的方法实现
官网demo将前端controller以及service都写在一起，就没再变动，直接在里面进行修改使用

var app = angular.module('app', [ 'angularFileUpload' ]);

app.controller( 'AppController', [ '$scope', 'FileUploader', function($scope, FileUploader) {
					//注册过滤器
					var uploader = $scope.uploader = new FileUploader({
						url : '../upload.do' // 上传路径
					});
					// FILTERS
					// a sync filter
					//过滤器
					uploader.filters .push({
								name : 'syncFilter',
								fn : function(item /* {File|FileLikeObject} */,
										options) {
									console.log('syncFilter');
									return this.queue.length < 10;
								}
							});
					// an async filter
					uploader.filters.push({
						name : 'asyncFilter',
						fn : function(item /* {File|FileLikeObject} */, options,
								deferred) {
							console.log('asyncFilter');
							setTimeout(deferred.resolve, 1e3);
						}
					});

					// 回调函数

					//添加文件失败时
					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);
						alert("文件体积超过单个文件最大值800M（该数值对应后台配置文件中的springmvc.xml中的配置）")
					};
					//取消上传
					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);
				} ]);

里面添加了很多自己的个人理解注释，都是通过解读API理解后进行标注，若有不对的地方请留言告知，感谢
这样就简单实现了单文件、多文件的上传，且支持进度显示等操作，当然可以根据自己的实际需求进行二次开发。

源码包

补充：
上传文件时候涉及附带参数，以便区分（比如区分那个用户上传的）
一种是直接在上传路径URL中写死，这种静态的，如果参数是变化的，动态的，就不行了，可以用如下格式

// 注册量化分析工具过滤器
		var uploader = $scope.uploader = new FileUploader({
			url : '../upload.do' // 上传路径
		});
		//在上传文件之前触发,添加检测任务ID以及检测工具tag用来区分
		uploader.onBeforeUploadItem = function(item) {
			formData = [{"id":ids},{"tag":"fx"}];
			Array.prototype.push.apply(item.formData, formData);
		};

其中的参数可根据自己的需求进行动态设置绑定，因为onBeforeUploadItem此函数为将文件上传前触发，从时间逻辑上完全可以实现。后端接收直接根据参数key来获取即可

@RequestMapping("/upload")
	//id： 代表检测任务的ID  tag：代表那个工具发Q起的请求
	public Result uploadCode(MultipartFile file,String id, String tag) throws Exception {
		
		
        
	System.out.println("tid为："+id);
		if (tag.equals("fx")) {
			System.out.println("分析工具");
			
		}