FormData可实现异步传输二进制文件(即异步文件上传)
XMLHttpRequest Level 2 添加了一个新的接口——FormData。它能使现在的AJAX交互更加简单。之前的AJAX在上传前，需要将表单的数据序列化。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。
边学边做，我也尝试做了一个上传图片的功能，如果以前可能要使用form提交或其他黑魔法，现在使用FormData就可以实现。
但是FormData存在兼容问题，详细请查看：
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData#.E6.B5.8F.E8.A7.88.E5.99.A8.E5.85.BC.E5.AE.B9.E6.80.A7
异步上传二进制文件代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
<form action="" id="testform">
<input type="file" name="file">
<input type="button" value="提交" id="subbtn">
</form>
<script>
var subbtn = document.getElementById("subbtn"); subbtn.onclick = function(){
var formElement = document.getElementById("testform");
var formData = new FormData(formElement); $.ajax({
url: "1.php",
type: "POST",
data: formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function(data){
$("body").append(data);
}
});
};
</script>
</body>
</html>
<?php
if ($_FILES["file"]["error"] > 0)
{
echo "错误: " . $_FILES["file"]["error"] . "<br />";
}
else
{
echo "文件名: " . $_FILES["file"]["name"] . "<br />";
echo "类型: " . $_FILES["file"]["type"] . "<br />";
echo "大小: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
echo "存储位置: " . $_FILES["file"]["tmp_name"];
}
?>
FormData可实现异步传输二进制文件(即异步文件上传)的更多相关文章
- HTML5——摒弃插件和前端框架的异步文件上传
之前我从来没有体会到HTML5的便利,直到这次需要一个异步上传的功能功能.一开始我以为文件的一些声明必须为HTML5才管用,后来才知道添加了很多以前没有的标签,并可以直接播放视频,音频等.可以不再使用 ...
- ajax异步文件上传和进度条
一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...
- 异步文件上传组件 Uploader
Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...
- 前端异步文件上传组件 Uploader
Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...
- ajax异步文件上传，iframe方式
不是我写的,我看了他的,思路很明确: 实现思路: 在js脚本中动态创建form,动态创建form中的内容,将文件上传的内容以隐藏域的方式提交过去,然后写好回调等. 感觉思路不难,但是我写不出来,感觉需 ...
- JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传
异步上传相信大家都做过类似的功能,JqueryAjaxFileUploader为我们提供了更简单的实现和使用方式.不过既然是JQUERY的插件那么它所依赖的环境大家都懂得.JqueryAjaxFile ...
- 关于ajax 异步文件上传 node 文件后台接口
<body> <img src="" alt="" id="img"> <input type="f ...
- asp.net MVC4 异步文件上传
1.下载ajaxfileupload.js 2.在控制器内创建如下方法 //文件上传 public ActionResult uploadFile(HttpPostedFileBase file) { ...
- SpringMVC异步文件上传下载
首先了解一下File的构造方法: File(String pathname):根据一个路径得到File对象 File(String parent,String child):根据一个目录和一个子文件/ ...
随机推荐
- ExtJs--15--Ext.is*各种类型推断的方法,简单看源代码就能够明确了
/** * Returns true if the passed value is empty, false otherwise. The value is deemed to be empty if ...
- UIButton UIImage 用法分析
一.UIButton和UIImageView的区别 1.显示图片 1> UIImageView只能显示一种图片(图片默认会填充整个UIImageView) image\setImage: 2&g ...
- NSNotification、delegate和KVO的区别
1.效率:delegate比nsnotification高.2. delegate方法比notification更加直接,最典型的特征是,delegate方法往往需要关注返回值, 也就是delegat ...
- getch()和getchar()之再讨论
原文:getch()和getchar()之再讨论 在C语言的字符处理函数中,getch()和getchar()是经常让人迷惑的两个函数,他们都有一些“奇怪的”特点让初学者摸不着头脑.两个函数有很多相似 ...
- DirectX:函数连接两个随机filter
函数连接两个随机filter HRESULT ConnectFilters( IBaseFilter *pSrc, IBaseFilter *pDest ) { IPin *pIn = 0; IPin ...
- OpenCV2第一个马拉松8环——画一个柱状图
在包里 灰度直方图 彩色直方图 葵花宝典 直方图的理论还是非常丰富的,应用也非常多,诸如: 直方图均衡化 直方图匹配(meanshift,camshift) 在这里,我先介绍基础.怎样绘制图像的直方图 ...
- Hibernate进化史-------Hibernate概要
一个.Hibernate概要 什么是Hibernate呢?首先,Hibernate是数据持久层的一个轻量级框架.实现了ORMapping原理(Object Relational Mapping). 在 ...
- 如何用dumpbin.exe检查编译器生成的托管模块所嵌入的信息
开启CMD 运行到dumpbin目录下:D:\Program Files (x86)\Microsoft Visual Studio 12.0\VC\bin 运行命令VCVARS32.BAT,配置环境 ...
- 利用servlet产生随机数,原理是获取Graphics对象进行绘图
public class ResonpeRandomImgDemo extends HttpServlet { int width=100; int height=30; public void do ...
- js理解
js-提前声明和new操作符理解 1.提前声明:声明变量后,js会把声明部分提前到作用域前面. var a=1; function aheadOfStatement(){ alert(a); va ...