jQuery+ajax实现文件上传

假设form表单中有上传文件的输入框，参考形式：

<form method="post" onsubmit="return uploadAction(this);">
     <div class="avatar-add">
     <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过2M</p>
     <div class="file-style"><input type="file" name="photo" id="upload-image" accept="image/*"></div>
     </div>
     <div class="layui-form-item"><button class="layui-btn" type="submit" >上传</button></div>
</form>

uploadAction是上传提交触发的js函数，它的内容参考：

var hasRequest = false;
function uploadAction(dom){

	if(typeof FormData == 'undefined'){

	        //(1)jQuery ajax上传文件，依赖FormData对象，为了友好展示，在JS函数中需要做下判断，因为不是所有浏览器都支持FormData对象。
		alert( "当前浏览器不支持FormData对象，请使用非IE内核或IE10+的浏览器上传文件");
		return false;

	}

	//(2)把form表单的DOM对象在实例化FormData对象时传入【也可以不传入】，这样就可以把from表单中的所有参数字段添加到FromData对象里。后面可以使用FormData对象的append方法添加其他的需要上传的参数。
	var formData = new FormData(dom);
	//formData.append('action_type',4);
	//formData.append('__token__',token);

	if(hasRequest) return false;//已经有事件请求了
	hasRequest = true;

	$.ajax({
		type:'post',
		url:url,
		data:formData,//(3)在没有文件上传时，通常是用serialize()方法
		processData: false,
		contentType: false,
		beforSend:function(){
		},
		error: function (jqXHR, textStatus, errorThrown) {
			hasRequest = false;
			alert( '系统异常,请稍后再试' );
			return false;
		},
		success:function(res){

			if(res.status){
				alert('成功');
			}else{
				alert('失败');
			}
			hasRequest = false;

		}					
	});
	return false;//阻止默认动作
}

使用jQuery ajax上传文件与普通的ajax提交数据不同之处在于需要专门设置两个参数：

processData: false,
contentType: false,

processData    Boolean

(默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

如果我们不把processData设置为false，data数据就会被序列化处理，这样就会报错：

contentType  Boolean or String

(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器（即使没有数据要发送）

"application/x-www-form-urlencoded"默认值不适合文件上传提交，不需要设置请求头。