本文摘自PHP中文网,作者php中世界最好的语言,侵删。
今天来给大家详细的介绍一下FormData对象,下面从头从头开始创建一个FormData对象,然后通过append() 方法向对象中添加键值,请看案例1 2 3 4 5 6 7 8 9 10 11 | var formData = new FormData();
formData.append( "username" , "Groucho" );
formData.append( "accountnum" , 123456);
formData.append( "userfile" , fileInputElement.files[0]);
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" );
|
注意:字段”userfile” 和 “webmasterfile” 都包含文件(file)。被分配到字段”accountnum”上的数字直接被FormData.append()方法转换成了字符串(字段的值(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对象的时候需要指定表单元素。
1 | var formData = new FormData(someFormElement);
|
就像下面这样:
1 2 3 4 | var formElement = document.querySelector( "form" );
var request = new XMLHttpRequest();
request.open( "POST" , "submitform.php" );
request.send( new FormData(formElement));
|
你也可以在获得FormData对象之后增加另外的数据,就像下面这样:
1 2 3 4 5 6 | 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>元素就可以:
1 2 3 4 5 6 7 8 9 10 | <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>
|
然后你可以使用下面的代码去发送:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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配合起来使用:
1 2 3 4 5 6 7 8 9 | 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
});
|
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
用Js操作HTTP的Cookie的实现步骤
Js操作BOM对象模型的详细介绍
在HTML的网页布局里div与span有什么区别
以上就是HTML里FormData对象的详细介绍的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html怎么改字体颜色
html属于什么文件html的文件该如何打开
html如何关闭当前页面
html marquee标签如何实现上下滚动,marquee标签的滚动速度设置
html input如何只能输入数字
如何打开html文件
html <b>加粗与<strong>加粗标签区别
html align属性是什么含义?html中的align属性设置方法介绍
html怎么让超链接没有下划线
浏览器中5种常用的事件解析
更多相关阅读请进入《FormData》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML里FormData对象的详细介绍