一、概述
FormData是HTML5新增的类型,主要用于提交表单数据,特别是带有文件上传的表单,通过JS中XMLHttpRequest的方式进行数据处理和传递。
通过FormData可以方便地以键值对的方式构建表单数据,并以"Content-Type: multipart/form-data" 格式提交到服务器端,支持字符串、文件等类型数据的传输。
二、FormData对象的创建和使用
创建FormData对象非常容易,只需使用new关键字即可:
var formData = new FormData();
创建好对象后,使用append()方法添加数据:
formData.append("username", "jack");
也可以一次添加多个数据,多次调用append()方法:
formData.append("username", "jack"); formData.append("password", "123456");
三、FormData对象的属性和方法
FormData对象还有以下常用的属性和方法:
1、has(key):判断是否存在某个字段
formData.has("username");
2、set(key, value):设置某个字段的值
formData.set("username", "tom");
3、get(key):获取某个字段的值
formData.get("username");
4、delete(key):删除某个字段
formData.delete("username");
5、entries():返回迭代器对象,包含所有字段(key)和值(value)
var iterator = formData.entries(); var pair = iterator.next(); while(!pair.done){ console.log(pair.value); pair = iterator.next(); }
四、FormData对象常见应用
1、表单的ajax上传
$("form").submit(function(e){ e.preventDefault(); var formData = new FormData(this); $.ajax({ url: "http://yourserver.com/upload", type: "POST", data: formData, processData: false, contentType: false, success: function(response){ console.log(response); } }); });
2、单文件上传
<input type="file" id="file-input" /> $("#file-input").change(function(){ var file = this.files[0]; var formData = new FormData(); formData.append("file", file); $.ajax({ url: "http://yourserver.com/upload", type: "POST", data: formData, processData: false, contentType: false, success: function(response){ console.log(response); } }); });
3、多文件上传
<input type="file" multiple id="file-input" /> $("#file-input").change(function(){ var files = this.files; var formData = new FormData(); for(var i=0; i五、总结
FormData是一种非常方便的数据格式,可以处理多种类型的数据,尤其适用于表单的AJAX上传和文件上传等场景。