FormData 对象的使用


2017-10-17 14:37
zpq
51

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


如何创建一个FormData对象

你可以自己创建一个FormData对象,然后通过调用它的*append()*方法添加字段,就像这样:

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // 数字 123456 会被立即转换成字符串 "123456"

// HTML 文件类型input,由用户选择
formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

**注意:**字段 "userfile" 和 "webmasterfile" 都包含一个文件. 字段 "accountnum" 是数字类型,它将被*FormData.append()*方法转换成字符串类型(FormData 对象的字段类型可以是 Blob, File, 或者 string: 如果它的字段类型不是Blob也不是File,则会被转换成字符串类型。

上面的示例创建了一个FormData实例,包含"username", "accountnum", "userfile" 和 "webmasterfile"四个字段,然后使用XMLHttpRequest的send()方法发送表单数据。字段 "webmasterfile" 是 Blob类型。一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob,继承 blob功能并将其扩展为支持用户系统上的文件。你可以通过 Blob() 构造函数创建一个Blob对象。