文章源自:http://www.oschina.net/translate/using-formdata-to-send-forms-with-xhr-as-keyvalue-pairs?cmp
利用 FormData 对象发送 Key/Value 对的异步请求
使用Key/Value对和FormData能够轻易地通过XMLHttpRequest指定要传递什么数据,它是一个非常强大的发送数据到服务器的方法。然而,似乎很多人都忽略了这个闪光点,所以,我认为我要在这里指出。
基础
通常的方法是你创建一个 FormData 对象。然后你使用append方法来加入任何额外的key和他们的值。就像这样:
var form = new FormData(); form.append("myName", "Robert");
然后你只需使用XMLHttpRequest(XHR)的send方法来发送:
var xhrForm = new XMLHttpRequest(); xhrForm.open("POST", "getfile.php"); xhrForm.send(form);
对于FormData,有趣的是不限制你加入字符串,但是实际上还有许多不同的类型
- 字符串
- 数字(发送的时候会转换为字符串)
- 文件
- 二进制对象(BLOB)
要想能够在服务器端处理一个FormData的表单,要知道的重点是和一个multipart/form-data编码的常规表单一样发送。
加入文件和二进制对象(blob)
如果你想加入一个文件,最简单的方法是访问通过一个type="file"的输入元素选择的文件:
form.append("theFile", fileInput.files[0]);
加入一个二进制对象(blob)
在发送和接收值方面,使用二进制对象(blob)是十分强大的。一个二进制对象(blob)可以手动通过它的内容或者类型的引用去创建:
form.append("blobbie", new Blob([imgAsBlobRef], {"type": "image/png"}));
创建你的二进制对象(blob)的内容:
你也可以自己穿件一个二进制对象(blob)的内容:
var xmlForBlob = ["Robert"], xmlBlob = new Blob(xmlForBlob, {"type" : "text/xml"}); form.append("xmlParts", xmlBlob);
在页面上获取图像和创建二进制对象(blob)
另外,你也可以在页面上通过XHR来获取一个图像然后通过FormData来发送:
// Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob var rhino = document.querySelector("#rhino"); if (rhino) { var xhr = new XMLHttpRequest(), blob; xhr.open("GET", "rhino.png", true); xhr.responseType = "blob"; xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { blob = xhr.response; var form = new FormData(); form.append("blobbie", blob); var xhrForm = new XMLHttpRequest(); xhrForm.open("POST", "getfile.php"); xhrForm.send(form); } }; // Send XHR xhr.send(); }
使用Web Activity
我以前在Mozilla Hacks博客上写过一篇关于Web Activities的文章, 使用里面的方法,你可以访问设备的相机,拍照,然后得到一个二进制对象(blob)的返回结果。
一旦你获取到它(blob),你就可以把它发送到服务器。在这种情况下,我们会通关过Web Activity拍照,通过FormData发送二进制对象到服务器,然后从服务器获得返回的图像,截止在当前页面中呈现图片:
var pick = new MozActivity({ name: "pick", data: { type: ["image/png", "image/jpg", "image/jpeg"] } }); pick.onsuccess = function () { var form = new FormData(); form.append("blobbie", this.result.blob); var xhrForm = new XMLHttpRequest(); xhrForm.open("POST", "getfile.php"); xhrForm.send(form); xhrForm.onreadystatechange = function () { if (xhrForm.readyState === 4) { var img = document.createElement("img"); img.src = xhrForm.response; var imagePresenter = document.querySelector("#image-presenter"); imagePresenter.appendChild(img); imagePresenter.style.display = "block"; } }; };
在服务器上读取表单
记得文章开头的地方我提到过的表单是在multipart/form-data的编码下发送。这里就是你怎样去读取通过FormData传送的名称、值和二进制对象的内容的方法:
<?php $fileName = $_FILES['blobbie']['name']; $fileType = $_FILES['blobbie']['type']; $fileContent = file_get_contents($_FILES['blobbie']['tmp_name']); $dataURL = 'data:' . $fileType . ';base64,' . base64_encode($fileContent); echo $dataURL; ?>
上面的代码是我在Eric Bidelman的一个gist里的发现的 。 通常,你应该能用任何的服务器端语言来做到这点。这里选择PHP,只是因为它已经在大多数服务器上运行了。
一个完整的demo
我把通过XHR获取一个在页面上的图像、通过FormData来传送它、读取内容以及返回一个图像能够再次显示在页面的URL放在了一个完整的例子中。
一般来说,这是一个展示怎样来回发送消失的实践。
可以在以下的URL中获取例子 https://github.com/robnyman/robnyman.github.com/tree/master/html5demos/formdata
(大概由于一些原因,GitHub页面不能让你运行PHP代码来读取文件内容,但是在FormData GitHub page 里可以看到带有一个不完整图像的页面/布局)。
(function () { // Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob var rhino = document.querySelector("#rhino"); if (rhino) { var xhr = new XMLHttpRequest(), blob; xhr.open("GET", "rhino.png", true); /* Set the responseType to "blob". If it isn't supported in the targeted web browser, use "arraybuffer" instead and wrap the response with new Uint8Array() below */ xhr.responseType = "blob"; xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { /* Create a blob from the response Only needed if the responseType isn't already blob If it's "arraybuffer", do this: blob = new Blob([new Uint8Array(xhr.response)], {type: "image/png"}); */ blob = xhr.response; var form = new FormData(); form.append("blobbie", blob); var xhrForm = new XMLHttpRequest(); xhrForm.open("POST", "getfile.php"); xhrForm.send(form); xhrForm.onreadystatechange = function () { if (xhrForm.readyState === 4) { console.log(xhrForm.response); rhino.src = xhrForm.response; } }; } }; // Send XHR xhr.send(); } })();
PHP 代码
<?php $fileName = $_FILES['blobbie']['name']; $fileType = $_FILES['blobbie']['type']; $fileContent = file_get_contents($_FILES['blobbie']['tmp_name']); $dataURL = 'data:' . $fileType . ';base64,' . base64_encode($fileContent); echo $dataURL; ?>
浏览器支持
实际上真的好棒!支持FormData的浏览器有:
- Firefox 4+
- Google Chrome 7+
- Safari 5+
- Opera 12+
- Internet Explorer 10+ (计划支持)
支持二进制对象的浏览器有:
- Firefox 13+
- Google Chrome 20+
- Safari 5.1+
- Opera 12.1+
- Internet Explorer 10+ (计划支持)
相关推荐
- `formData.append(key, value)`:向FormData对象添加一个键值对。 3. **设置/修改数据**: - `formData.set(key, value)`:如果键key不存在,新增数据;若存在,则修改该键对应的值。 4. **判断数据是否存在**...
在发送POST请求时,我们可以利用fetch API或者XMLHttpRequest来利用FormData对象。例如,使用fetch: ```javascript fetch('https://example.com/upload', { method: 'POST', body: formData }); ``` 或使用...
`FormData`是HTML5引入的一个非常实用的API,它允许我们构建一个键值对的数据集合,常用于发送数据到服务器,特别是在进行异步请求(如Ajax)时。在JS和PHP的交互中,`FormData`起到了桥梁的作用,尤其在处理文件...
`FormData`对象是HTML5引入的一个重要特性,它允许我们创建一个包含键值对的数据结构,特别适合用来发送二进制数据,如文件,到服务器。在本教程中,我们将深入探讨如何使用`FormData`来实现文件上传,包括前端和...
在JavaScript中,`FormData`对象是一个非常实用的工具,主要用于处理表单数据,尤其在异步提交表单或上传文件时。它允许开发者方便地构建和操作一组键值对,这些键值对可以是文本或者文件。下面我们将详细探讨`...
如果你需要发送多个POST请求,可以维护一个`QNetworkAccessManager`实例,并为每个请求创建不同的`QNetworkRequest`和`QNetworkReply`对象。使用信号和槽机制来跟踪每个请求的状态。例如,你可以创建一个队列来存储...
使用XMLHttpRequest或Fetch API,可以将FormData对象发送到服务器。以下是一个使用Fetch的例子: ```javascript fetch('https://example.com/upload', { method: 'POST', body: formData }); ``` ### 5. 浏览器...
因此,JQuery提供了基于FormData的异步提交方法,使得在不刷新页面的情况下能够发送包括文件在内的复杂数据。 `FormData`对象是HTML5引入的一个新特性,它允许开发者创建一个包含键值对的数据结构,特别适合于处理...
formData.append('key', 'value'); // 使用jQuery的ajax方法发送数据 $.ajax({ url: '/upload', type: 'POST', data: formData, processData: false, // 不处理数据,保持FormData原样 contentType: false...
4. 发送请求:`xhr.send('key1=value1&key2=value2');` 这里的字符串是表单数据,键值对之间用'&'分隔。 三、表单数据封装 在实际应用中,我们通常需要封装表单数据。假设有一个表单: ```html ()">提交</...
使用jQuery的`$.ajax`方法发送POST请求到服务器端的`server.php`,并设置`processData`和`contentType`为false,以确保FormData对象能被正确处理。 在PHP端,我们需要接收并处理这些数据。由于我们设定了dataType为...
// 对于POST请求,数据可以是字符串或FormData对象 ``` 5. **处理响应** 当请求完成后,我们可以通过`responseText`或`responseXML`属性获取响应数据,具体取决于服务器返回的是文本还是XML。如果返回的是JSON,...
在前端开发中,FormData对象是HTML5引入的一个重要特性,用于构建和发送数据,通常与XMLHttpRequest或fetch API配合使用,以实现异步数据提交。然而,在某些情况下,你可能会遇到"FormData:FormData支持其中window....
本主题将深入探讨如何使用原生JavaScript实现异步文件上传,包括利用`FormData`对象、Base64编码以及对图片进行压缩、变色和尺寸调整的方法。 一、异步上传 传统的文件上传通常依赖于表单的`<form>`元素,通过`...
`$.param()`是jQuery内部用于URL编码参数的方法,它可以将键值对转化为`key=value&key2=value2`这样的格式。 下面是一个简单的示例: ```javascript function jsonToFormParams(jsonObj) { var formData = ''; ...
data: { key1: 'value1', key2: 'value2' }, // 要发送的数据 success: function(response) { // 请求成功后的回调函数,response是服务器返回的数据 console.log('Data saved successfully:', response); }, ...
为了解决这个问题,我们可以利用Ajax配合FormData对象实现异步文件上传。 **1. 传统HTML表单文件上传** 首先,让我们回顾一下传统的HTML表单文件上传的实现。一个简单的HTML表单可能如下所示: ```html ...
在客户端(通常是JavaScript),使用`FormData`对象来构造`multipart/form-data`请求。以下是一个使用jQuery的示例: ```javascript var formData = new FormData(); formData.append('fieldName', 'fieldValue...