[java-ssm]$.ajax()单文件上传

使用ajax上传文件相比form表单上传文件，最好的一点就是让用户体验更舒适。form表单提交无论如何都会导致页面刷新，而ajax提交可以自己控制，如果上传失败还可以停留在原页面。

文件上传流程分析：

上传文件本质是把参数转成二进制编码，必须是POST提交方式才行，前台提交到后台就是以二进制数据流的方式传输。

以往在做文件上传时，使用表单提交的话，jsp代码大致要要写成

<form action="addStandard" enctype="multipart/form-data" method="POST" id="myform">
	......
</form>

最主要是要有enctype="multipart/form-data"这条属性，它指定了二进制编码方式，如果不写enctype这个属性，它的默认值是enctype=“application/x-www-form-urlencoded”，只能简单传递字符串给后台，不能用于文件上传。而且指定二进制编码方式上传时要切记提交方式必须是method=“POST”，不能用GET提交方式。

现如今我们做文件上传需要使用$.ajax()提交，原理也是一样的，要把参数进行二进制编码。这里需要使用FormData对象，本篇只简单使用FormData对象来完成ajax上传，关于FormData对象的其他方面详解不在本篇中说明。

以下的例子暂不限制上传文件类型和大小。

解析器：

ssm上传都需要在springmvc-servlet.xml里配置文件中添加文件上传解析器

<!-- 配置文件上传 MultipartResolver -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
	<property name="maxUploadSize" value="500000000 " /><!-- value里的值是限制上传的最大字节 -->
	<property name="defaultEncoding" value="UTF-8" />
</bean>

jsp代码：

注意提交时不使用submit提交按钮，而是用button按钮交由js处理。

<form id="myform">
	<table>
		<tr>
			<td><span>*</span>标准号：</td>
		<td><input type="text" name="std_num" /></td>
		</tr>
		<tr>
			<td><span>*</span>中文名称：</td>
			<td><input type="text" name="zhname" /></td>
		</tr>
		<tr>
			<td><span>*</span>版本：</td>
			<td><input type="text" name="version" /></td>
		</tr>
		<tr>
			<td><span>*</span>关键字、词：</td>
			<td><input type="text" name="key" /></td>
		</tr>
		<tr>
			<td>发布日期(yyyy-MM-dd)：</td>
			<td><input type="text" name="release_date" /></td>
		</tr>
		<tr>
			<td>实施日期(yyyy-MM-dd)：</td>
			<td><input type="text" name="impl_date" /></td>
		</tr>
		<tr>
			<td><span>*</span>附件：</td>
			<td><input type="file" name="file" /></td>
		</tr>
		<tr>
			<td rowspan="2">
				<button type="button" id="save">ajax上传</button>
				<button type="button" id="return">取消</button>
			</td>
		</tr>
	</table>
</form>

js代码：

cache:false表示不会从浏览器缓存中加载请求信息；
processData:false表示发送的数据将被转换为二进制对象
contentType:false同contentType: multipart/form-data，能够支持上传文件和文本数据。

// ajax方式提交上传
$("#save").click(function() {
	if (!check()) {// 非空、正则验证的方法代码略
		return;
	}
	var formData = new FormData($("#myform")[0]);
	// 使用$.ajax()进行文件上传
	$.ajax({
		url : "addStandardAjax",
		type : "post",//必须是post请求
		data : formData,
		cache : false,//上传文件还需要设置cache、processData、contentType这三个属性的值为false
		processData : false,
		contentType : false,
		success : function(result) {
			if (result == "success") {
				alert("上传成功");
				location.href = "indexMgr.html";//上传成功后就重定向到另一个页面
			} else if (result == "error") {
				alert("上传失败");
			} else if (result == "null") {
				alert("上传文件不能为空");
			} else if (result == "std_num is exist") {
				alert("标准号已存在");
			}
		},
		error : function() {
			alert("连接失败");
		}
	});
});

java-ssm控制器代码：

@RequestMapping(value = "addStandardAjax", method = RequestMethod.POST)
@ResponseBody
public String addStandardAjax(HttpServletRequest request,
	@RequestParam(value = "file", required = true) MultipartFile attach,
	@RequestParam(required = true) String std_num,
	@RequestParam(required = true) String zhname,
	@RequestParam(required = true) String version,
	@RequestParam(required = true) String key,
	@RequestParam(value = "release_date", required = false) String release_dateString,
	@RequestParam(value = "impl_date", required = false) String impl_dateString) {
	// 访问数据库检查标准号是否可用
	if (standardBiz.checkStdnumIsExist(std_num)) {
		System.out.println("标准号已存在");
		return "std_num is exist";
	}
	// 日期转换(因为没有写转换器，所以需要手动转换)
	Date release_date = null;
	Date impl_date = null;
	SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
	if (!StringUtils.isNullOrEmpty(release_dateString)) {
		try {
			release_date = sdf.parse(release_dateString.trim());
		} catch (ParseException e) {
			e.printStackTrace();
		}
	}
	if (!StringUtils.isNullOrEmpty(impl_dateString)) {
		try {
	impl_date = sdf.parse(impl_dateString.trim());
		} catch (ParseException e) {
	e.printStackTrace();
		}
	}
	if (!attach.isEmpty()) {// 存有内容，即上传文件不为空
		// File.separator是斜杠，为了防止编译等问题和兼容操作系统。会自动检测系统，在windows里变成"//"，在linux里变成"\"。
		String serverPath = request.getServletContext().getRealPath("statics" + File.separator + "uploadfiles");// 指定存储的目录(绝对路径形式)
		String oldFileName = attach.getOriginalFilename();// 原文件名(不包含路径、包含后缀)，以便于获取后缀名
		String prefix = FilenameUtils.getExtension(oldFileName);// 根据原文件名获取后缀名(不带.)
		String newFileName = null;
		try {
			// 用[时间戳+md5+后缀]的方法命名，这样存在服务器的文件名永远不会冲突
			newFileName = System.currentTimeMillis() + DigestUtils.md5DigestAsHex(attach.getBytes()) + "." + prefix;// 完整新名字，不带路径
			File targetFile = new File(serverPath, newFileName);// 准备文件(尚未创建)
			// 如果serverPath这个目录不存在，则创建这个目录。
			if (!targetFile.exists()) {
				targetFile.mkdirs();
			}
			attach.transferTo(targetFile);// 保存->这一步标志着文件成功上传到服务器
			// 把文件名等信息新增到数据库
			Standard standard = new Standard(null, std_num, zhname, version, key, release_date, impl_date,newFileName);
			if (standardBiz.addStandard(standard)) {
				return "success";
			} else {
				return "error";
			}
		} catch (IOException e) {
			e.printStackTrace();
			return "error";
		}
	} else {
		return "null";
	}
}

其他：

本案例中没有把js具体的非空验证写出来。一般控件的非空验证很简单，但是上传文件的非空验证该怎么做？

前端的上传文件的元素：

<input type="file" name="file" />

js代码：

var fileInput=$("input[name=file]").get(0).files[0];
if(!fileInput){
	alert("上传文件不能为空");
}