FormData--JQuery使用FormData利用Ajax实现多图片、文件上传

传统的form表单提交会导致页面刷新，但是在有些情况下，我们不希望页面被刷新，这种时候我们都是使用Ajax的方式进行请求的。
我自己了解的实现文件上传的比较好用的，有普通的Ajax提交文件方式、FilesUpload等，但是用了FormData后，觉得fromdata使用起来更加简单便捷，所以在此给各位小伙伴们分享一下，不足之处还请各位伙伴提示，在此感谢！
例如表单：
表单内必须设enctype=”multipart/form-data”属性。

"add_news" method="post" enctype="multipart/form-data" > 
type="file" id="photo">
type="file" id="photo2">
type="file" id="photo3">
type="text" id="photo4">
type="text" id="photo5">

第一种提交方式：

//直接把整个Form表单内容塞到FormData对象里面；
var formElement = $("#add_news");
var formData = new FormData(formElement);
$.ajax({  
        url: '../image/customser.do',  
        type: 'POST',  
        data: formData,  
        dataType: 'JSON',  
        cache: false,  
        processData: false,  
        contentType: false,
        success : function(data) {
            alert("上传成功");
        },
        error:function(){
            alert("上传失败");
        }
    });

第二种方式：

var formData = new FormData();
//获取普通input文本内容
formData.append("servicerid", $("#photo4").val());
formData.append("servicerid", $("#photo5").val());
//获取图片等文件
formData.append("file", $("#photo1")[0].files[0]);
formData.append("file", $("#photo2")[0].files[0]);
formData.append("file", $("#photo3")[0].files[0]);
$.ajax({  
        url: '../image/customser.do',  
        type: 'POST',  
        data: formData,  
        dataType: 'JSON',  
        cache: false,  
        processData: false,  
        contentType: false,
        success : function(data) {
            alert("上传成功");
        },
        error:function(){
            alert("上传失败");
        }
    });

后台获取：

@RequestMapping(value = "/image/customser.do")
@ResponseBody
public ResultObject uploadAuthImages(@RequestParam(value = "file", required = false) MultipartFile[] files, 
            HttpServletRequest request) {
        Map map = new HashMap();
        //保存文件  
        for(int i=0; i"/")  + "upload/";
            UUID uuid = UUID.randomUUID();
            String fileName = new Date().getTime() + uuid.toString() + ".jpg";
            System.out.println("图片地址："+filePath);
            File targetFile = new File(filePath, fileName);
            if (!targetFile.exists()) {
                targetFile.mkdirs();
            }
            // 保存
            try {
                files[i].transferTo(targetFile);
            } catch (Exception e) {
                e.printStackTrace();
            }
            //添加图片路径到map集合
            map.put("img"+i, "/upload/" + fileName);
        }
        map.put("photo4", request.getParameter("photo4"));
        map.put("photo5", request.getParameter("photo5"));
        return this.oneService.uploadAuthImages(map);

    }

这里要注意几点：
1、processData设置为false。因为data值是FormData对象，不需要对数据做处理。
2、标签添加enctype=”multipart/form-data”属性。
3、cache设置为false，上传文件不需要缓存。
4、contentType设置为false。因为是由表单构造的FormData对象，且已经声明了属性enctype=”multipart/form-data”，所以这里设置为false。
5、上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为中声明的是name=”file”。
6、后台：MultipartFile[] files 代表数组类型，获取多文件上传；如果是单文件上传的话，MultipartFile file 就可以了。