Ajax表单异步上传文件实例代码（包括文件域）
1.起因
做前台页面时，需要调用WebAPI的Post请求，发送一些字段和文件（相当于把表单通过ajax异步发送出去，得到返回结果），然后得到返回值判断是否成功。
2.尝试
先是尝试了一下"jQueryFormPlugin"，这玩意就是的巨大的坑，实现他和jquery1.9.2兼容性就不是太好，好不容易把$.browser的问题解决了，发现用他上传文件得不到返回值。
$("#view").submit(
$("#view").ajaxSubmit({
type:"post",
url:"../api/Article/Add",
dataType:"json",
success:function(msg){
console.log(msg);
},
error:function(msg){
$("#resultBox").html("连接服务器失败");
console.log(msg);
}
})
);
比如上面的代码，不过怎么配置，只要上传了文件，success里面返回的msg一定是null（chromium浏览器下），但实际是有返回值的，而且没有文件时也是正常的。更可怕的是IE/EDGE下提示下载那个Json返回值。
翻了一下jquery.form.js的源代码，发现他是用Iframe实现的伪Ajax，不清真，Pass！
//aretherefilestoupload?
varfiles=$('input:file',this).fieldValue();
varfound=false;
for(varj=0;j<files.length;j++)
if(files[j])
found=true;
if(options.iframe||found)//options.iframeallowsusertoforceiframemode
fileUpload();
else
$.ajax(options);
这是有无文件时，分别调用2个不同的函数。
3.解决方案
经过多反调查，发现xhr（XMLHttpRequest）是个好东西。经过测试主流浏览器和手机浏览器都支持这个东西。下面介绍一下在jquery/zepto的ajax获取原生XMLHttpRequest对象上传表单（文件）的方法。参考文章：https://www.nhooo.com/article/91267.htm
functionAjaxForm(formID,options){
varform=$(formID);
//将form对象直接作为参数newFormData对象
varformData=newFormData(form[0]);
$("input[type='file']").forEach(function(item,i){
//获取file对象即相当于可以直接post的$_FILES数据
vardomFile=$(item)[0].files[0];
//追加file对象
formData.append('file',domFile);
})
if(!options)options={};
options.url=options.url?options.url:form.attr("action");
options.type=options.type?options.type:form.attr("method");
options.data=formData;
options.processData=false;//telljQuerynottoprocessthedata
options.contentType=false;//telljQuerynottosetcontentType
options.xhr=options.xhr?options.xhr:function(){
//这是关键获取原生的xhr对象做以前做的所有事情
varxhr=$.ajaxSettings.xhr();
xhr.upload.onload=function(){
console.log("onload");
}
xhr.upload.onprogress=function(ev){
if(ev.lengthComputable){
varpercent=100*ev.loaded/ev.total;
console.log(percent,ev)
}
}
returnxhr;
};
options.success=options.success?options.success:function(data){
alert(data)
};
$.ajax(options);
}
//调用
$("#sub").click(function(e){
AjaxForm("#myForm");
});
以上所述是小编给大家介绍的Ajax表单异步上传文件实例代码（包括文件域)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！