时间:2021-07-01 10:21:17 帮助过:58人阅读
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 user formData.append("userfile", fileInputElement.files[0]); // JavaScript file-like object var 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()方法转换成了字符串(字段的值(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 });
相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
相关阅读:
用Js操作HTTP的Cookie的实现步骤
Js操作BOM对象模型的详细介绍
在HTML的网页布局里div与span有什么区别
以上就是HTML里FormData对象的详细介绍的详细内容,更多请关注Gxl网其它相关文章!