XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。
创建一个FormData对象
你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段，如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var oMyForm = new FormData();
oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"
// fileInputElement中已经包含了用户所选择的文件oMyForm.append("userfile", fileInputElement.files[0]);
var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});
oMyForm.append("webmasterfile", oBlob);
var oReq = new XMLHttpRequest();
oReq.open("POST", "http://foo.com/submitform.php");
oReq.send(oMyForm); |
注：字段 "userfile" 和 "webmasterfile" 的值都包含了一个文件。通过 FormData.append() 方法赋给字段 "accountnum" 的数字被自动转换为字符（字段的值可以是一个 Blob 对象，File对象或者字符串，剩下其他类型的值都会被自动转换成字符串）。
在该例子中，我们创建了一个名为 oMyForm 的 FormData 对象，该对象中包含了名为"username"，"accountnum"，"userfile" 以及 "webmasterfile" 的字段名，然后使用XMLHttpRequest的 send() 方法把这些数据发送了出去。"webmasterfile" 字段的值不是一个字符串,还是一个 Blob 对象。
使用HTML表单来初始化一个FormData对象
可以用一个已有的 form 元素来初始化 FormData 对象，只需要把这个 form 元素作为参数传入 FormData 构造函数即可：
|
1
|
var newFormData = new FormData(someFormElement);
|
例如：
|
1
2
3
4
|
var formElement = document.getElementById("myFormElement");
var oReq = new XMLHttpRequest();
oReq.open("POST", "submitform.php");
oReq.send(new FormData(formElement));
|
你还可以在已有表单数据的基础上，继续添加新的键值对，如下：
|
1
2
3
4
|
var formElement = document.getElementById("myFormElement");
formData = new FormData(formElement);
formData.append("serialnumber", serialNumber++);
oReq.send(formData); |
你可以通过这种方式添加一些不想让用户编辑的固定字段,然后再发送.
使用FormData对象发送文件
你还可以使用 FormData 来发送二进制文件.首先在 HTML 中要有一个包含了文件输入框的 form 元素：
|
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 />
</form><div id="output"></div>
<a href="javascript:sendForm()">Stash the file!</a>
|
然后你就可以使用下面的代码来异步的上传用户所选择的文件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function sendForm() {
var oOutput = document.getElementById("output");
var oData = new FormData(document.forms.namedItem("fileinfo"));
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 uploading your file.<br \/>";
}
};
oReq.send(oData);
} |
你还可以不借助 HTML 表单，直接向 FormData 对象中添加一个 File 对象或者一个 Blob 对象：
|
1
|
data.append("myfile", myBlob);
|
如果 FormData 对象中的某个字段值是一个 Blob 对象，则在发送 HTTP 请求时，代表该 Blob 对象所包含文件的文件名的 "Content-Disposition" 请求头的值在不同的浏览器下有所不同，Firefox使用了固定的字符串"blob"，而 Chrome 使用了一个随机字符串。
你还可以使用 jQuery 来发送 FormData，但必须要正确的设置相关选项：
|
1
2
3
4
5
6
7
8
9
|
var fd = new FormData(document.getElementById("fileinfo"));
fd.append("CustomField", "This is some extra data");
$.ajax({ url: "stash.php",
type: "POST",
data: fd,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false // 告诉jQuery不要去设置Content-Type请求头
}); |
浏览器兼容性
桌面端：
| Basic support | 7+ | 4.0 (2.0) | 10+ | 12+ | 5+ |
支持filename参数 |
(Yes) | 22.0 (22.0) | ? | ? | ? |
移动端：
| Basic support | 3.0 | ? | 4.0 (2.0) | ? |
12+ |
? |
支持filename参数 |
? | ? | 22.0 (22.0) | ? | ? | ? |
参考文献：
- MDN：使用 XMLHttpRequest
- MDN：XMLHttpRequest FormData
- XMLHttpRequest 2 新技巧
- MDN：使用 FormData 对象
- W3C：XMLHttpRequest Level 2
相关推荐
// 1 使用FormData进行表单的数据处理 var fd = new FormData(form); // 2 使用$.ajax发送fd // 需要指定两个属性 // - processData : false // - contentType : false $.ajax({ method : 'POST', url : '/...
浏览器会自动将FormData对象转换成multipart/form-data格式，无需手动设置。 对于JavaScript对象或嵌套对象，如果需要将其添加为一个部分，可以通过将整个对象序列化成一个字符串，或者使用FormData提供的append...
在Web开发中，`multipart/form-data`是一种用于发送表单数据的编码类型，尤其适用于处理文件上传。此编码方式能够使客户端浏览器将表单中的普通文本字段与文件字段一起发送到服务器端进行处理。 #### 标题解析 - **...
使用FormData方式提交上传附件与相关数据 同时实现jQuery-form.js附件上传功能 同时实现标准的html input file提交 同时实现easyuiFileBox与标准的ajax附件上传功能 有数据库，下载直接能运行
当我们需要上传文件或同时发送键值对（包括复杂的数据结构如JSON）时，通常会使用`multipart/form-data`和JSON这两种数据格式。下面我们将深入探讨如何在C#中实现这两种数据格式的POST请求。 一、`multipart/form-...
首先，需要创建一个HttpWebRequest对象，并设置其Method属性为“POST”，ContentType属性为“multipart/form-data”。然后，使用StringBuilder类来构建请求的主体部分，包括边界、文件参数和键值对参数。最后，使用...
在本主题中，我们将深入探讨如何使用C#来模拟POST请求，以便发送JSON和multipart/form-data格式的数据。这两种数据格式在现代网络应用中非常常见，特别是用于API交互和文件上传。 首先，让我们了解JSON（JavaScript...
而不像传统的 ASP.NET WebService 可以自动解析 multipart 中的多媒体数据，并通过访问 Context.Request.Form["name"] 和 Context.Request.Files["name"] 方便地访问。 这份代码在 HttpMultipartFormDataParser ...
安装npm install -S @jswork/next-form2data用法 // DO NOT USE in NODE ENV (because: form-data package has bug.)import nxForm2Data from '@jswork/next-form2data' ;const formData = new FormData ( ) ;...
* 将json对象的值解析后填入web Form 在AJAX开发中这是关键技术： 1、将form中的数据利用本工具转换成json格式的字符串，再通过ajax传给服务器，从而可以实现无刷新的form提交。； 2、通过AJAX从服务器得到json格式...
本文介绍了Node Js 使用KOA处理form-data格式传输过来的文件，分享给大家。具体如下： 使用koa有一段时间了，评价是小巧精悍，只封装了基本的如request对象和response对象到上下文中，其他功能基本上靠第三方中间件...
本主题围绕“基于jQuery的异步上传文件插件，使用了HTML5的FormData对象”展开，我们将深入探讨HTML5的FormData对象、jQuery在文件上传中的作用以及如何实现异步文件上传。 首先，HTML5的FormData对象是处理表单...
利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二...
在客户端（通常是JavaScript），使用`FormData`对象来构造`multipart/form-data`请求。以下是一个使用jQuery的示例： ```javascript var formData = new FormData(); formData.append('fieldName', 'fieldValue...
5. **处理form_data**：form_data通常由多个部分组成，每个部分都有自己的边界标识。你需要根据边界解析正文，提取出文件名和内容。 6. **保存文件**：一旦解析出文件内容，你可以将其写入到本地文件系统，通常会...
特别是当涉及到使用`multipart/form-data`作为表单的编码类型时，这种需求更为突出。本文将深入探讨如何在不借助第三方库（如JSP Smart Upload）的情况下，解决文件上传中的传值问题。 #### 一、`multipart/form-...
5. **异步操作**：在Web应用中，尽可能使用异步方法（如`async/await`），以提高应用的响应速度和并发性能。 从提供的压缩包文件名"hCLoudDemo"来看，可能包含了一个与云存储相关的示例应用。在实际项目中，这样的...
使用c#实现的HttpClient拼接multipart/form-data形式参数post提交数据，包含图片内容，有需要的可以下载，希望能帮到有需要的人，
总的来说，Delphi 7 使用 Indy 10 的 `TIdHTTP` 控件和 `TIdMultipartFormDataStream` 类可以方便地实现 `multipart/form-data` 方式的文件上传。理解这些组件的工作原理和使用方法，对于开发涉及文件交互的Web应用...
这里的`@change`监听器会在文件选择后触发`fileValueChange2`方法，而`enctype="multipart/form-data"`是关键，它确保文件数据以formData格式发送。 接下来，我们来看`fileValueChange2`方法： ```javascript ...