HTML里FormData对象的详细介绍

var formData = new FormData();formData.append( username , Groucho formData.append( accountnum , 123456); // number 123456 is immediately converted to a string 123456 // HTML file input, chosen by userformData.append( userfile , fileInputElement.files[0]);// JavaScript file-like objectvar content = a id= a b id= b hey! /b /a // the body of the new file...var blob = new Blob([content], { type: text/xml });formData.append( webmasterfile , blob);var request = new XMLHttpRequest();request.open( POST , http://foo.com/submitform.php 

注意：字段”userfile” 和 “webmasterfile” 都包含文件（file）。被分配到字段”accountnum”上的数字直接被FormData.append()方法转换成了字符串（字段的值（html' target='_blank'>value）可能是一个Blob, File, 或一个string：如果值既不是Blob也不是File，则值会被转换成一个string）。

这个例子创建了一个FormData实例，其中包含字段”username”, “accountnum”, “userfile” 和 “webmasterfile”，然后使用XMLHttpRequest对象的send()方法去发送表单数据。字段”webmasterfile”是一个Blob。一个Blob对象代表一个文件对象的原始数据。但是Blob代表的数据不必须是javascript原生格式的数据。文件接口是基于Blob,继承Blob功能和扩大它对用户文件系统的支持。为了构建一个Blob可以调用Blob()构造函数。

从一个HTML表单获得一个FormData对象

为了获得一个包含已存在表单数据的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));

你也可以在获得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发送文件。简单的 form 中在包含一个 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对象中添加File或Blob，就像下面这样：

data.append( myfile , myBlob, filename.txt

当使用append() 方法的时候，可能会使用到第三个参数去发送文件名称（通过Content-Disposition头发送到服务器）。如果没有指定第三个参数或这个参数不被支持的话，第三个参数默认是”blob”。

如果你设置好正确的options，你也可以和jQuery配合起来使用：

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, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType});

相信看了这些案例你已经掌握了方法，更多精彩请关注php 其它相关文章！

相关阅读：

用Js操作HTTP的Cookie的实现步骤

Js操作BOM对象模型的详细介绍

在HTML的网页布局里div与span有什么区别

以上就是HTML里FormData对象的详细介绍的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。