您当前的位置: 首页 >  文章详情 网站首页 文章详情

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

发布时间:2017-1-23 17:37:50 作者:Jastar · Wang 浏览:2472

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;
	}


原创声明

1.本文章系原创,版权归本站所有。

2.本站所有文章允许转载,开放分享,但严禁用于任何商业用途。

3.转载文章请务必保留以下信息:
 原文作者:Jastar·Wang(或“代码与酒博客频道”)
 原文链接: