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表单异步上传文件实例代码(包括文件域),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!