传统的form表单提交会导致页面刷新，但是在有些情况下，我们不希望页面被刷新，这种时候我们都是使用Ajax的方式进行请求的。 我自己了解的实现文件上传的比较好用的，有普通的Ajax提交文件方式、FilesUpload等，但是用了FormData后，觉得fromdata使用起来更加简单便捷，所以在此给各位小伙伴们分享一下，不足之处还请各位伙伴提示，在此感谢！ 例如表单： 表单内必须设enctype=”multipart/form-data”属性。
<form id="add_news" method="post" enctype="multipart/form-data" > <input type="file" id="photo"><input type="file" id="photo2"><input type="file" id="photo3"><input type="text" id="photo4"><input type="text" id="photo5"></form>第一种提交方式：
//直接把整个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")@ResponseBodypublic ResultObject uploadAuthImages(@RequestParam(value = "file", required = false) MultipartFile[] files, HttpServletRequest request) { Map<String, Object> map = new HashMap<String, Object>(); //保存文件 for(int i=0; i<files.length; i++){ String filePath = request.getsession().getServletContext().getRealPath("/") + "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 就可以了。
新闻热点
疑难解答
