form-ajax-post-while-file-upload-is-present
很久以前,form的post需要刷新页面。
后来有人发明了ajax,又有人开源了jquery,我们的form可以ajax post而无须刷新页面。
var url, method, data, element = $('form');
url = element.attr('action');
method = element.attr('method');
data = $(element[0].elements).serializeArray();
$.ajax({
url:url,
type:method,
data:data
});
但存在一个问题,不支持带有文件上传的form。
<form method="post" action="submit" enctype="multipart/form-data">
<input type="file" name="file"/>
</form>
因为,上传的文件对象无法被序列化。。。
这个问题需要新的DTD来解决,于是就有了FormData的对象。
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData
XMLHttpRequest Level 2添加了一个新的接口FormData
利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,
我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单",
比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。
所有主流浏览器的较新版本都已经支持这个对象了,
比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
注意!需要设置ajax参数{cache:false,processData:false,contentType:false}
查看ajax的文档 http://www.w3school.com.cn/jquery/ajax_ajax.asp
于是我们又可以愉快地 form-ajax-post 了
var url, method, data, element = $('form');
url = element.attr('action');
method = element.attr('method');
data = new FormData(element[0]);
$.ajax({
cache:false,processData:false,contentType:false,
url:url,
type:method,
data:data
});
相关推荐
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo