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

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


评论 1 您还未登录,请先 登录 后发表或查看评论
相关推荐

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

代码与酒

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值