简单的 JavaScript 表单处理与 FormData 参数介绍 - 文章教程

简单的 JavaScript 表单处理与 FormData 参数介绍

发布于 2018-04-02 字数 2800 浏览 1942 评论 0

XMLHttpRequest level  2 增加了新的参数 FormData 接口的支持。 参数 FormData 对象提供了一种方法来轻松地构建一组键/值对表示表单字段及其值,然后可以使用 XMLHttpReques t的 send() 方法在 multipart/form-data 的格式很容易地发送。

简单的 JavaScript 表单处理与 FormData 参数介绍

什么是 FormData 参数?

当你想将一组复杂的数据从一个网页(文件、非ASCII编码的内容)发送到服务器,则必须使用 multipart/form-data 内容类型。 要设置内容类型的 <form> ,你应该这样写:

<form method="post" enctype="multipart/form-data">
<input type="file" name="media"/>
<input name="nickname"/>
<input name="website"/>
<input type="submit" value="upload"/>
</form>

这就是我们平时做的要上传文件的表单。 使用 Firefox 3.6 开始,你可以使用 JavaScript 操作文件,也许你想使用 XMLHttpRequest 发送文件。 但如果你想复制这种形式,这真的很难,因为你必须创建 multipart/form-data 内容在自己的 JavaScript。 这是参数 formdata 是有用的,重现 <form> 提交机制在 JavaScript 中。

FormData 对象

该参数的 formdata 对象允许您编写了一组键/值对的使用 XMLHttpRequest 发送。 这个对象只有一个方法:

append(key, value);

其中 key 是你的值的名称,并在 value 可以是字符串或文件。 您可以创建一个参数 formdata 对象,然后追加具体的值,然后通过 XMLHttpRequest 的发送数据。 如果你要模拟上面的形式,你可以这样写:

// aFile could be from an input type="file" or from a Dragged'n Dropped file
var formdata = new FormData();
formdata.append("nickname", "Foooobar"); 
formdata.append("website", "http://hacks.mozilla.org");
formdata.append("media", aFile);
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://foo.bar/upload.php");  
xhr.send(formdata);

参数 formdata 和 <form> 元素

Firefox 的扩展 HTML 表单元素,增加一个 getFormData() 方法,可以让你获取表单的数据作为参数 formdata 对象。 这是 HTML 标准尚未一部分,但预计将被添加到该规范在将来的某个时候(尽管可能使用不同的名称):

var formElement = document.getElementById("myFormElement");
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitform.php");
xhr.send(formElement.getFormData());

您也可以将数据添加到参数 formdata 对象从表单取回并发送它的,就像这样:

var formElement = document.getElementById("myFormElement");
formData = formElement.getFormData();
formData.append("serialnumber", serialNumber++);
xhr.send(formData);

这使您可以增强表单的数据以及在发送之前,包括附加信息,这不是一定的用户可编辑的表格上。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论