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):根据一个目录和一个子文件/ ...
随机推荐
- 程序员面试必备经典CTCI，谷歌面试官经典作品！
1.1 判断一个字符串中的字符是否唯一 1.2 字符串翻转 1.3 去除字符串中重复字符 1.8 利用已知函数判断字符串是否为另一字符串的子串 2.1 从链表中移除重复结点 2.2 实现一个算法从一个 ...
- Kaggle入门——使用scikit-learn解决DigitRecognition问题
Kaggle入门--使用scikit-learn解决DigitRecognition问题 @author: wepon @blog: http://blog.csdn.net/u012162613 1 ...
- Unity3d在线游戏Socket通讯
网络游戏是一个人的互动娱乐软件应用.因为它是交互式,当然,需要了解对方的通信.这需要通信Socket:我们今天要实现的主角即套接字.Socket的英文原义是"孔"或"插座 ...
- Android摘要ImageView的scaleType属性
Android在ImageView的scaleType有8一个选项 1 matrix不正确图像放大,原来自view在左上角绘制图片(片不变形): 2 fitXY将图片所有绘制到view中,可是图片会变 ...
- ubuntu新内核不能用启动回滚到旧内核的方法
先看一看自己电脑上有哪些内核文件 merlin@tfAnalysis:~$ dpkg --get-selections|grep linux libselinux1:i386 install linu ...
- 怎样使用万用表来测试板子上的TX和RX引脚
最近在看openwrt时看到的一个方法,直接看下面写的: 文章来自:http://wiki.openwrt.org/doc/hardware/port.serial 经实际测试时发现,将万用表的负表笔 ...
- ubuntu14.04无法播放更新后完善的解决方案
-------------------------------------- 前几天的ubuntu升级14.04该,(Kubuntu版本)时间去更新一下系统..结果没有声音了,网络视频也看不了了.百度 ...
- webapp 开发调试测试方法总结
好久都没有发表过日志了,反正近期项目也已经接近尾声了,那么是时候该总结一下在项目中用到的技术了,请看:这里先废话几句,我们现在的开发模式是这样子的:先把本地的网页上传到远程服务器(因为好多设备都要去访 ...
- Array(数组)的使用
方法 说明 Concat() 连接2个或多个数组,并返回结果 Push() 向数组末尾添加一个或多个元素,并返回新的长度 Reverse() 颠倒数组中元素的顺序 Sort() 对数组的元素进行排序 ...
- c#通用多线程基类,以队列形式
c#通用多线程基类,以队列形式 个人原创.欢迎转载.转载请注明出处.http://www.cnblogs.com/zetee/p/3487084.html 多线程这个概念大家都很熟悉,对于winfor ...