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

来源：互联网发布：防盗门锁芯规格知乎编辑：程序博客网时间：2024/06/16 09:38

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)@ResponseBodypublic 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;}

0 0