简述
本文的目的主要是用户上传文件至服务器时,异步上传,不用刷新页面。
1 $("#saveArea").click(function () { 2 ????// 获得上传文件DOM对象,根据已有表单创建formdata 3 ????var formData = new FormData($("#uploadForm")[0]); 4 ????$.ajax({ 5 ????????url: ‘${pageContext.request.contextPath }/user/updateUserHeadPortrait‘, 6 ????????type: ‘POST‘, 7 ????????data: formData, 8 ????????contentType: false, 9 ????????processData: false,10 ????????success: function (data) {11 ????????????var result = data.split(‘#‘)[0];12 ????????????if (result == "修改成功!") {13 ????????????????alert(‘success‘);14 ????????????} else {15 ????????????????alert(result);16 ????????????}17 ????????}18 ????});19 }) ???????
解释:
1.用户点击保存按钮,根据页面form的id获得表单,再根据表单创建formdata。
2.将formdata传至后台即可。
后台代码
@RequestMapping("updateUserHeadPortrait")@ResponseBodypublic Object updateUserHeadPortrait(MultipartFile headPortrait, HttpSession session) throws IOException { ???Users users = (Users) session.getAttribute("user"); ???String filename = users.getuUid()+"_"+headPortrait.getOriginalFilename(); ??????????????????????????????????????????????????????//文件名称 ???String realPath = session.getServletContext().getRealPath("img/userHeadPortrait"); ??????????????????????//绝对路径 ???String type = headPortrait.getContentType(); ???????????????????????????????????????????????????????????????//文件类型 ???File file = new File(realPath, filename); ???if ("image/png".equals(type) || "image/jpg".equals(type) || "image/jpeg".equals(type)) { ???????headPortrait.transferTo(file); ???????????????????????????????????????????????????//将图片保存到本地 ???????if (userServiceImap.updateUserHeadPortrait(users, filename)) { ???????????users.setuTitleImg(filename); ???????????session.setAttribute("user", users); ???????????return JSON.toJSONString("修改成功!#"+filename); ???????} else { ???????????return JSON.toJSONString("修改失败,请联系技术支持#"); ???????} ???} else { ???????return JSON.toJSONString("修改失败,请检查文件类型#"); ???}}
解释:
和普通的文件上传一样的。注意参数名称要和页面上面input的name一样。
Ajax上传文件
原文地址:http://www.cnblogs.com/gaofei-1/p/7823324.html