1.什么是FormData？
先来看下Mozilla上的介绍：XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax，使用FormData的最大优点就是我们可以异步上传一个二进制文件.
原文介绍：戳这里
2.实例
说明：下面的实例用来展示简单的修改用户信息的过程，并包含着上传头像的功能
2.1 HTML代码
<form id="userForm">
<p>姓名：<input type="text" name="userName" /></p>
<p>头像：<input type="file" name="file" />
<button type="button" value="保存" οnclick="save()"></button>
</form>2.2 JavaScript代码
注意：下面的js代码是采用jquery（较低版本可能不兼容）的ajax进行实现，想了解更多原生的js使用方式使劲戳这里
<script type="text/javascript">
/* 保存 */
function save() {
//[0]表示获取原生对象
var formData = new FormData($("#userForm")[0]);
//还可以手动添加自定义字段，如下：
formData.append("userPwd", "123456");
$.ajax({
url : 'url...',
type : 'POST',
data : formData,
async : false,
cache : false,
contentType : false,// 告诉jQuery不要去设置Content-Type请求头
processData : false,// 告诉jQuery不要去处理发送的数据
success : function(data) {
alert(data);
//...
},
error : function(data) {
alert(data);
//...
}
});
}
</script>2.3 后台Java代码
注意：下面示例模拟更新用户信息过程，上传文件只是简单保存，并无校验文件大小、后缀名啦神马的，相信聪明的你们肯定能举一反三，666！
/**
* 模拟更新用户信息
*
* @param request
* @param file
* 头像文件
* @param user
* 用户对象，自动映射字段
* @return 反馈信息
*/
@RequestMapping(value = "update", method = RequestMethod.POST)
@ResponseBody
public String update(HttpServletRequest request, @RequestParam(value = "file", required = false) MultipartFile file,
UserInfo user) {
String msg = "success";
/**
* 1.简单上传文件并保存到headimg目录下
*/
String headImg = null;// 用户保存用户头像文件名
if (file != null && !file.isEmpty()) {
headImg = file.getOriginalFilename();
// 构建上传目录及文件对象，不存在则自动创建
String path = request.getSession().getServletContext().getRealPath("headimg");
File imgFile = new File(path, headImg);
// 保存文件
try {
file.transferTo(imgFile);
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 2.修改用户信息（这里只是模拟啊...）
*/
try {
UserInfo old = new UserInfo();
// 这个字段是从表单里面传过来的
old.setUserName(user.getUserName());
// 这个字段是从js里面传过来的
old.setUserPwd(user.getUserPwd());
if (headImg != null) {
old.setHeadImg(headImg);
}
// 保存或更新....
service.update(old);
} catch (Exception e) {
msg = e.getMessage();
e.printStackTrace();
}
return msg;
}
37
