利用 FormData 对象发送 Key/Value 对的异步请求
使用Key/Value对和FormData能够轻易地通过XMLHttpRequest指定要传递什么数据,它是一个非常强大的发送数据到服务器的方法。 基础 通常的方法是你创建一个 FormData 对象。然后你使用append方法来加入任何额外的key和他们的值。就像这样: view source
print? 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[]); 加入一个二进制对象(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 === && xhr.status === ) {
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 === ) {
var img = document.createElement("img");
img.src = xhrForm.response; var imagePresenter = document.querySelector("#image-presenter");
imagePresenter.appendChild(img);
imagePresenter.style.display = "block";
}
};
};<span><span style="line-height: 19px;"> </span></span>
记得文章开头的地方我提到过的表单是在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 里可以看到带有一个不完整图像的页面/布局)。
JavaScript 代码 (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);
/*
10 Set the responseType to "blob".
11 If it isn't supported in the targeted web browser,
12 use "arraybuffer" instead and wrap the response
13 with new Uint8Array() below
14 */
xhr.responseType = "blob"; xhr.onreadystatechange = function () {
if (xhr.readyState === && xhr.status === ) {
/*
20 Create a blob from the response
21 Only needed if the responseType isn't already blob
22 If it's "arraybuffer", do this:
23
24 blob = new Blob([new Uint8Array(xhr.response)], {type: "image/png"});
25 */
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 === ) {
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 +
• Google Chrome +
• Safari +
• Opera +
• Internet Explorer + (计划支持) 支持二进制对象的浏览器有:
•Firefox +
• Google Chrome +
• Safari 5.1+
• Opera 12.1+
• Internet Explorer + (计划支持)
利用 FormData 对象发送 Key/Value 对的异步请求的更多相关文章
- 利用 FormData 对象和 Spring MVC 配合可以实现Ajax文件上载功能
Ajax文件上载 利用 FormData 对象和 Spring MVC 配合可以实现Ajax文件上载功能: 步骤 导入组件并准备静态脚本 <dependency> <groupId& ...
- HTML5利用FormData对象实现显示进度条的文件上传
摘自:https://blog.csdn.net/q1056843325/article/details/53759963 自己做是按这个实现的,兼容性还不错 完整简约的解决方案 下面的代码清单是包括 ...
- 利用formdata对象上传文件时,需要添加的参数
function doUpload() { var formData = new FormData($( "#uploadForm" )[0]); $.ajax({ url: 'h ...
- H5 FormData对象的使用
XMLHttpRequest Level2 添加了一个新的接口--FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...
- 使用JS的FormData对象
利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 创建一个FormData对象 你可以先创建一个空的F ...
- HTML5 FormData对象
利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 创建一个FormData对象 你可以先创建一个空的F ...
- H5 FormData对象的使用——进行Ajax请求并上传文件
XMLHttpRequest Level2 添加了一个新的接口——FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...
- new FormData() - FormData对象的作用及用法
一.概述 FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成 一个queryString 2. 异步上传二进制文件. 二.使用 ...
- 【译】使用FormData对象
系列文章说明 原文 FormData对象能让你生成一系列用于XMLHttpRequest发送的键值对.它主要的目的在于发送表单数据,但也能独立用于传输有键形式的数据.其传输的数据格式和表单使用subm ...
随机推荐
- Oracle内存管理(之二)
[深入解析--eygle] 学习笔记 1.2.2 UGA和CGA UGA(用户全局区)由用户会话数据.游标状态和索引区组成.在共享server模式下,一个共享服务进程被多个用户进程共享,此时UGA是S ...
- java中的Checked Exception和Unchecked Exception的区别
Java 定义了两种异常: - Checked exception: 继承自 Exception 类是 checked exception.代码需要处理 API 抛出的 checked excepti ...
- Android API之android.provider.ContactsContract.Data
android.provider.ContactsContract.Data Constants for the data table, which contains data points tied ...
- 深入了解PHP闭包的使用以及实现
一.介绍 匿名函数(Anonymous functions),也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数.最经常用作回调函数(callback)参数的值.当然,也有其它应用 ...
- Servlet线程安全性
问题:使用以下的代码演示servlet的线程安全问题? public class MultiThreadQuestion extends HttpServlet { public int count ...
- Java compiler level does not match解决方法(转)
本文转自:https://www.cnblogs.com/lauer0246/p/5740572.html#undefined 从别的地方导入一个项目的时候,经常会遇到eclipse/Myeclips ...
- '<>' operator is not allowed for source level below 1.7
报错:'<>' operator is not allowed for source level below 1.7 这是eclipse的编译环境与项目的要求不对应造成的,这个错误一般是导 ...
- 【LeetCode】130. Surrounded Regions (2 solutions)
Surrounded Regions Given a 2D board containing 'X' and 'O', capture all regions surrounded by 'X'. A ...
- [Python]网络爬虫(七):Python中的正则表达式教程(转)
接下来准备用糗百做一个爬虫的小例子. 但是在这之前,先详细的整理一下Python中的正则表达式的相关内容. 正则表达式在Python爬虫中的作用就像是老师点名时用的花名册一样,是必不可少的神兵利器. ...
- PowerDesigner 12小技巧-pd小技巧-pd工具栏不见了-pd修改外键命名规则-pd添加外键
PowerDesigner 12小技巧-pd小技巧-pd工具栏不见了-pd修改外键命名规则-pd添加外键 1. 附加:工具栏不见了 调色板(Palette)快捷工具栏不见了PowerDesigner ...