html5 formdata api,HTML5 API FormData --- 使用

FormData

简介

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。

使用

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同。

构造函数

var formData = new FormData(FormElement);

这里的FormElement是html元素为form表单；当然这里也可以直接构造不用填写form元素，填写form元素的目的是可以直接选取form中表单元素的name和value为formData添加键值对。

添加

append(): 给当前formData对象添加一个键/值对。

append(DOMString name, Blob value, optional DOMString filename);

append(DOMString name, DOMString value);

name: 字段名称，也就是键名；

value: 字段值，可以是Blob对象，可以是File对象，可以是字符串，剩下其它，该值会被自动转为字符串；

filename: (可选)指定文件的文件名，当value参数被指定为一个Blob对象或者一个File对象时，该文件名会被发送到服务器上，对于Blob对象来说，这个值默认为”blob”。

发送

把已经添加好键值对的formData对象直接作为ajax请求时所传的参数。如果你请求成功，会看到formData会把form里的所有表单name和value生成如图所示：

示例代码

html

Your email address:

Custom file label:

File to stash:

js - 运用了jquery之类的插件

(function(){

var file =null, fileOther=null,fd=new FormData($("#form")[0]);

bindEvent();

function bindEvent(){

$("#file").change(function(){

file = this.files[0];

});

$("#fileother").change(function(){

fileOther = this.files[0];

})

$("#submit").click(function(){

fd.append("file", file);

fd.append("fileother", fileOther);

ajaxSend();

})

}

function ajaxSend(){

$.ajax({

url: "your url",

type: "post",

data: fd,

processData: false, // 不处理数据

contentType: false, // 不设置内容类型

success: function(resp){

console.log(resp);

}

})

}

})()

以上的案例有一个坑，因为本人踩过，所以就留给你们踩踩吧。

其它资源