jQuery 的 ajax 如何上传文件

在使用 FileUpload 来上传文件的时候，发现 ajax 上传文件是一个问题，现在看看 ajax 上传文件的基本步骤。

第一步

首先我们知道上传文件的 form 表单是要使用封装的。也就是在 form 表单添加 enctype="multipart/form-data" 属性，并且使用 post 提交。

<form action="#"
	 method="post" enctype="multipart/form-data">
	 	<input type="text" name = "accNm" id="accNm"><br>
	 	<input type="password" name = "accPass" id="accPass"><br>
		选择文件：<input type="file" name="photo" id="photo"><!-- 文件选择框 -->
		<br>
		<button>提交</button>
</form>

第二步

FormData 对象

XMLHttpRequest Level 2 添加了一个新的接口 FormData ，FormData对象可以异步的提交这个”表单”，比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。

jQuery 的 ajax

首先要新建一个 FormData 对象，并且把文件、其他参数都通过 append 方法添加进来。

var formData = new FormData();
formData.append('photo', $("#photo")[0].files[0]);
formData.append('accNm', $("accNm").val());
formData.append('accPass', $("accPass").val());

然后把这个 FormData 添加到请求参数中。

var url = "xxx/testservlet";
$.ajax({
			type : "POST",
			url : url,
			data : formData,
    		// 告诉jQuery不要去设置Content-Type请求头
			contentType : false,
    		// 告诉jQuery不要去处理发送的数据，用于对data参数进行序列化处理 这里必须false
			processData : false,
			success : function(data) {
				alert(data);
			}
		});

这样就完成了上传文件的操作了。