multipart/form-data多文件上传

1.html

anction为后端路径 

enctype="multipart/form-data"为文件提交类型

 

                
                


                    
                    

                        
上传文件
                    
                    

                        

                            

                                安卓安装包
                                

                                    
                                
                            

                            

                                苹果安装包
                                

                                    
                                
                            
                        
                        

                            

                                上传图标
                                

                                    
                                
                            
                        
                        

                            

                                上传图片

                                

                                    演示图片1
                                    

                                
                                

                                    演示图片2
                                    

                                
                                

                                    演示图片3
                                    

                                
                                

                                    演示图片4
                                    

                                
                            
                        
                    
                    

                        确认
                    

                
                
            

2.springmvc后端

multipartResolver 根据文件名解析获取文件

@RequestMapping(value="/upload", method=RequestMethod.POST	)
	@ResponseBody
	public Map upload(HttpServletRequest request,HttpServletResponse response){
		Map resMap = new HashMap();
//		获取appId
		int id = Integer.parseInt(request.getParameter("id"));
		resMap.put("id", id);
		String rootPath=UploadFileController.class.getResource("/").getFile();
		rootPath = rootPath.substring(1, rootPath.length()-8);
		String apkPath=rootPath+"file"+"/apk/";
		String ipaPath=rootPath+"file"+"/ipa/";
		String appIconPath=rootPath+"img"+"/AppIcon"+"/";
		String appShowPath=rootPath+"img"+"/AppShow"+"/"+id+"/";
		try {


		//创建一个通用的多部分解析器
		CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
		//判断 request 是否有文件上传,即多部分请求
		System.out.println("1");
		if(multipartResolver.isMultipart(request)){
			System.out.println("2");
			//转换成多部分request
			MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request;
			MultipartFile apkFile=multiRequest.getFile("apkFile");
			MultipartFile ipaFile=multiRequest.getFile("ipaFile");
			MultipartFile appIconFile=multiRequest.getFile("appIcon");
			List appShowFiles=multiRequest.getFiles("appShow");

			UploadMultipartFile.saveOneFile(apkFile, apkPath, id);
			UploadMultipartFile.saveOneFile(ipaFile, ipaPath, id);
			UploadMultipartFile.saveOneFile(appIconFile, appIconPath, id);
			UploadMultipartFile.saveListFile(appShowFiles, appShowPath, id);

			Map checkMap=fileService.checkFile(id);
			 for (Object o : checkMap.keySet()) {
				 System.out.println("key=" + o + " value=" + checkMap.get(o));
				 if (checkMap.get(o).equals("false")) {
					 resMap.put("result", "error");
					break;
				}else {
					resMap.put("result", "success");
				}
				  }
		}else {
			resMap.put("result", "error");
		}} catch (Exception e) {
			resMap.put("result", "error");
			return resMap;
		}
		return resMap;
	}

3.UploadMultipartFile

将MultipartFile保存为本地文件

package com.baosight.webapp.util;
import java.io.File;
import java.io.IOException;
import java.util.List;

import org.springframework.web.multipart.MultipartFile;

import com.baosight.webapp.web.UploadFileController;

public class UploadMultipartFile {
	public static void saveOneFile(MultipartFile file,String path,int id){
		try {


		System.out.println("empty");
		if (!file.isEmpty()) {
			System.out.println("not empty");
			System.out.println("file:"+file.getOriginalFilename());
			String OriginalNameArr[]=file.getOriginalFilename().split("[.]");
			String fileName = id+"."+OriginalNameArr[OriginalNameArr.length-1];
			path=path+fileName;
			System.out.println("path:"+path);
			File localFile = new File(path);
			try {
				if(!localFile.getParentFile().exists()) {
					 //如果目标文件所在的目录不存在，则创建父目录
					 localFile.getParentFile().mkdirs();
					 System.out.println("parent:"+localFile.getParentFile().getPath());
				 }
				file.transferTo(localFile);
			} catch (Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		} catch (Exception e) {
			System.out.println("exce[tion2");
			System.out.println(e.getMessage());
		}
	}

	public static void saveListFile(List files,String path,int id){
		try {

		String path2="";
		if(files!=null&&files.size()>0){
			int j=0;
			for (MultipartFile multipartFile : files) {
				if (!multipartFile.isEmpty()) {


				 j++;
				 String OriginalNameArr[]=multipartFile.getOriginalFilename().split("[.]");
				 path2=path+j+"."+OriginalNameArr[OriginalNameArr.length-1];
				 File localFile = new File(path2);
				 if(!localFile.getParentFile().exists()) {
					 //如果目标文件所在的目录不存在，则创建父目录
					 localFile.getParentFile().mkdirs();
					 System.out.println("parent:"+localFile.getParentFile().getPath());
				 }
			try {
				multipartFile.transferTo(localFile);
			} catch( Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
				}
		}
		}} catch (Exception e) {
			System.out.println("exception1");
			// TODO: handle exception
		}
	}



}

4.阻止表单提交后的跳转动作

引入jquery.js和jquery-form.js文件

本文这里基于angularjs+html5开发，有angularjs多文件上传有问题后,使用form表单上传文件，为了有回调信息使用jquery-form.js阻止表单跳转

按钮触发的事件：ng-click="saveReport()"

 $scope.saveReport=function saveReport() {
        $scope.showFile=false;
        $scope.showProgress=true;
        // jquery 表单提交
        $("#fileForm").ajaxSubmit(function(message) {
            console.log( message);

            if(message.result=="success"){
                alert("上传成功");

                $state.go("dash",null,{reload:true});
            }else{
                alert("上传失败,请在更新中重新上传");
                $state.go("dash");
            }
           
        });

        return false; // 必须返回false，阻止页面跳转
    }