H5 FormData对象就模拟一个原始的表单格式的数据,以前上传文件非得要用个form包起来,就是和后台约定的一个传输数据格式,
FormData就是按照规定的格式,把form中所有表单元素的name与value组装成一个queryString,省去你手工拼接的工作,如果用
过jquery的话,应该知道有个表单序列号的函数,作用和它是一样的,不过FormData还提供了更多的操作方法,全部在原型中,
自己本身没任何的属性及方法。
demo:
<form enctype="multipart/form-data" id="user_info">
<input id="uname" name="uname">
<input id="age" name="age">
<input id="sex" name="sex">
<input type="file" id="photo" name="photo">
</form>
<script>
var formdata = new FormData(user_info) //实例FormData对象,传入form表单id,不传就是实例一个空对象
formdata.append("height","27") //调用append方法可以接着追加数据,参数两个,键值对形式,相当于手工拼接
var age= formdata.get("age") //调用get()方法可以获取数据
formdata.delete("sex") //调用delete方法可以删除数据
还有has(),getAll(),forEach()方法。
$.ajax({
url: 'views/home/save.php',
type: 'POST',
data: formdata, // 上传formdata封装的数据
dataType: 'JSON',
cache: false, // 不缓存
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success:function (txt) { //成功回调
console.log(txt);
}
});
</script>