您的位置：首页 > 编程语言 > Java开发

Spring MVC 中使用H5接口FormData上传文件实例

2017-01-19 17:37 555 查看

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="保存" onclick="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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航