FormData 对象的使用
来源:互联网 发布:淘宝宝贝上下架软件 编辑:程序博客网 时间:2024/05/20 10:11
通过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);
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对象。
通过HTML表单创建FormData对象
想要构造一个包含Form表单数据的FormData对象,需要在创建FormData对象时指定表单的元素。
var formData = new FormData(someFormElement);
示例:
var formElement = document.querySelector("form");var request = new XMLHttpRequest();request.open("POST", "submitform.php");request.send(new FormData(formElement));
你还可以在创建一个包含Form表单数据的FormData对象之后和发送请求之前,附加额外的数据到FormData对象里,像这样:
var formElement = document.querySelector("form");var formData = new FormData(formElement);var request = new XMLHttpRequest();request.open("POST", "submitform.php");formData.append("serialnumber", serialNumber++);request.send(formData);
这样你就可以在发送请求之前自由地附加不一定是用户编辑的字段到表单数据里
使用FormData对象上传文件
你还可以使用FormData上传文件。使用的时候需要在表单中添加一个文件类型的input:
<form enctype="multipart/form-data" method="post" name="fileinfo"> <label>Your email address:</label> <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> <label>Custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>File to stash:</label> <input type="file" name="file" required /> <input type="submit" value="Stash the file!" /></form><div></div>
然后使用下面的代码发送请求:
var form = document.forms.namedItem("fileinfo");form.addEventListener('submit', function(ev) { var oOutput = document.querySelector("div"), oData = new FormData(form); oData.append("CustomField", "This is some extra data"); var oReq = new XMLHttpRequest(); oReq.open("POST", "stash.php", true); oReq.onload = function(oEvent) { if (oReq.status == 200) { oOutput.innerHTML = "Uploaded!"; } else { oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>"; } }; oReq.send(oData); ev.preventDefault();}, false);
注意:如果FormData对象是通过表单创建的,则表单中指定的请求方式会被应用到方法open()中 。
你还可以直接向FormData对象附加File或Blob类型的文件,如下所示:
data.append("myfile", myBlob, "filename.txt");
使用appned()方法时,可以通过第三个可选参数设置发送请求的头 Content-Disposition
指定文件名。如果不指定文件名(或者不支持该参数时),将使用名字“blob”。
如果你设置正确的配置项,你也可以通过jQuery来使用FormData对象:
var fd = new FormData(document.querySelector("form"));fd.append("CustomField", "This is some extra data");$.ajax({ url: "stash.php", type: "POST", data: fd, processData: false, // 不处理数据 contentType: false // 不设置内容类型});
if (empty($_FILES['file']['name'])){
- FormData 对象的使用
- FormData 对象的使用
- FormData 对象的使用
- FormData 对象的使用
- HTML5中FormData对象的使用
- 文件上传与FormData对象的使用
- 使用FormData对象
- 使用FormData对象
- 使用FormData对象
- 使用FormData对象
- 使用FormData对象
- 使用FormData对象
- 使用FormData对象
- 使用FormData对象提交表单
- HTML5 FormData对象 的上传文件的使用
- 使用H5的formData对象实现文件的异步上传
- Web 前沿——HTML5 FormData 对象的使用
- Ajax使用FormData对象上传文件的两种方式
- RT-Thread在STM32F103C8T6上面的使用——使用msh
- 本人为初学者,留下一点自己的知识
- 为什么不能用二级指针直接指向二维数组
- MFC自绘按钮 动态效果
- 计算1000以内的完数
- FormData 对象的使用
- kafka的offset是个什么鬼。。
- 洛谷1896[SCOI2005]互不侵犯King
- 关于opcdaauto.dll的注册
- Bootstrap4:导航栏右侧对齐
- jQuery第四节---jQuery效果2
- 她好像要走了
- 线程中主线程与子线程之间的关系
- AndroidStaggeredGrid的瀑布流效果实现