利用H5 FormData 实现表单中多图上传（可带其他如String类型数据）

本篇的具体思路来源于右侧网址：http://blog.csdn.net/qq_19551571/article/details/49977983

本篇代码有所修改，请具体区分。

本篇使用的是 form 提交，ajax 发送请求（但个人感觉把容器换成 div 之类的也是一样的思路，待验证），提交数据类型 FormData 对象。

 

 

H5中 form 表单的代码：

<form class="inpform" id="uploadForm" enctype="multipart/form-data">
<!-- 注意enctype必须得填 -->
    <div class="f-inp">
        <div><i>请输入您的号码：</i>
            <input type="text"  name="phone" id="phone"  >
        </div>
       
        <input type="file" id="files" name="files" multiple/> <!-- multiple 确保能选择多文件 -->
    </div>
</form>

<input  type="button" value="提交" onclick="add();">      

js、ajax代码：

function add(){
     var formData = new FormData($("#uploadForm")[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。 
     $.ajax({
         async: false,        //要求同步 不是不需看你的需求
         url : "/uploadImage/save",  
         type : 'POST',  
         data : formData,  
         processData : false,  //必须false才会避开jQuery对 formdata 的默认处理   
         contentType : false,  //必须false才会自动加上正确的Content-Type
         success : function(result) {  
               ...
         },  
         error : function(result) {  
               ...
         }  
     });  
}    

java Spring 中的代码：

处理器
@Controller
@RequestMapping("/uploadImage")
public class UploadController{
@RequestMapping("/savecc")
　　//注意传入的参数
    public void saveImageCC (@RequestParam(value = "files", required = true)MultipartFile[] multipartFiles ,String phone, HttpServletRequest request)throws Exception{
　　　　...
        //调用文件上传处理类
        Map<String, Object> result = UploadFilesUtils_cc.uploadCC(multipartFiles, request, 1, "", phone, 1000, 1000, true);
    　 ...
　　}
}    


utils类：
public class UploadFilesUtils_cc {
    public static Map<String,Object> uploadCC(MultipartFile[] multipartFiles,HttpServletRequest request, int type,String module,String folder,int width, 
                int height ,Boolean createFolder)
            throws UnsupportedEncodingException ,IOException , URISyntaxException{
            request.setCharacterEncoding("utf-8");
            //结果集
            Map<String, Object> result = new HashMap<>();
            //图片集
            Map<String, String> data = new HashMap<>();
            String uploadPath = "E:/reporitory/static/uploadImg/"+folder;
            File file = new File(uploadPath);
            if(!file.exists()){
                file.mkdirs();
            }
            try{
                Boolean success = true ;
                String message = "文件上传失败";
                String fieldNames = "";
                String urls = "";
                String uuid ;
                
                for(MultipartFile multipartFile:multipartFiles){
                    if(multipartFile != null){
                        //如果fileitem中封装的上传文件，得到上传的文件名称
                        //filename格式"c:/static/mod/xxx.png"
                    String filename = multipartFile.getOriginalFilename();
                    fieldNames += "|" + multipartFile.getName();
                    
                    if(StringUtils.isNotBlank(filename)){
                            // 注意：不同的浏览器提交的文件名是不一样的，有些浏览器提交上来的文件名是带有路径的，如：
                            // c:\a\b\1.txt，而有些只是单纯的文件名，如：1.txt
                            // 处理获取到的上传文件的文件名的路径部分，只保留文件名部分
                        filename = filename.substring(filename.lastIndexOf("/") + 1);
                            // 得到上传文件的扩展名
                        String fileExtName = filename.substring(filename.lastIndexOf(".")+1);
                            // 如果需要限制上传的文件类型，那么可以通过文件的扩展名来判断上传的文件类型是否合法
                            // 此处是图片格式校验
                        if((type == Constant.FileType.image.key)
                                && !UploadFilesUtils_cc.checkIMGType(fileExtName)) {
                            message = "图片格式不正确,请重新上传";
                            success = false;
                            result.put("success", success);
                            result.put("message", message);
                            return result;
                            //break;
                        } else {
                            //使用UUID解决文件重名问题
                            uuid = UUID.randomUUID().toString();
                            
                            //数据库里面需要保存的图片上传的路径
                            String url = uuid + "." + fileExtName;
                            
                            //获取item中的上传文件输入流
                            InputStream in = multipartFile.getInputStream();
                                //创建文件输出流
                            FileOutputStream out = new FileOutputStream(uploadPath + "\\" + url);
                                //创建缓冲区
                            byte[] buffer = new byte[1024];
                                //判断输入流中的数据是否已经读完的标识
                            int len = 0;
                                //循环将输入流读入缓冲区，(len=in.read(buffer))>0就表示in里面还有数据
                            while((len = in.read(buffer)) > 0){
                                //使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath + "\\" + url)当中
                                out.write(buffer , 0 , len);
                            }
                                //关闭输入流
                            in.close();
                                //关闭输出流
                            out.close();
                            
                            if(StringUtils.isBlank(urls)){
                                urls = url;
                            } else {
                                urls += "|" + url;
                            }
                        }
                    }
                    //data.put("linked", "..."+folder+"/"+ urls);
                    //data.put("filename", filename);
                }
                }
                    fieldNames = fieldNames.substring(1);
                    data.put("phone", folder);
                    data.put("fieldNames", fieldNames);
                    data.put("linked","..."+folder+"/"+ urls);
                    result.put("success", true);
                    result.put("message", "图片上传成功！");
                    result.put("data",data);
                
                return result;
            }catch(Exception e){
                System.out.println("上传文件出现错误：" + e.getMessage());
                return null;
            }
        
    }
}