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):根据一个目录和一个子文件/ ...
随机推荐
- JS 数组array方法push, pop, unshift, shift, slice,splice,contact, join, sort
Array:数组对象用来在单独的变量名中存储一系列的值 定义数组: 1. var arrayObj = new Array(); 2. var arrayObj = ...
- SoC嵌入式软件架构设计II：否MMU的CPU虚拟内存管理的设计与实现方法
大多数的程序代码是必要的时,它可以被加载到内存中运行.手术后,可直接丢弃或覆盖其他代码.我们PC然在同一时间大量的应用,能够整个线性地址空间(除了部分留给操作系统或者预留它用),能够觉得每一个应用程序 ...
- SURF分析算法
SURF分析算法 一个.整体形象 这个概念是积分图像Viola和Jones建议.随机位积分图像(i.j)的值原始图象的左上角随机点(i,j)级配相应的重点领域值的总和,其数学公式如图1所看到的 ...
- C# 调用Webservice并传递序列化对象
原文:C# 调用Webservice并传递序列化对象 C#动态调用WebService注意要点 1.动态调用的url后面注意一定要加上?WSDL 例如:string _url = "ht ...
- 使用AndroidStudio快速开发教程
关于AndroidStudio的使用 参考:http://www.codes51.com/article/detail_98914.html 1.对于开发环境的通性:编写 调试 视图 一般的开发 ...
- PHP激活用户注册验证邮箱
本文将结合实例介绍如何使用PHP+Mysql完成注册帐号.发送激活邮件.验证激活帐号.处理URL链接过期的功能. 注册邮箱激活流程 <ul class='ul_demo''> <li ...
- 框架Asp.net Identity
框架Asp.net Identity 在Asp.net上,微软的membershop框架经历了Asp.net membership到Asp.net simple membership,再到现在的Asp ...
- 增加VMWare开机画面时间，来防止快速跳过而无法进入BIOS
用记事本打开xx.vmx,在里面添加一行: bios.bootDelay = "30000" 意思是开机后,在开机画面里停留30秒.
- 【【分享】深入浅出WPF全系列教程及源码
】
因为原书作者的一再要求,在此声明,本书中的部分内容引用了原书名为<深入浅出WPF>的部分内容,假设博文不能满足你现有的学习须要,能够购买正版图书! 本人10月份提出离职,可是交接非常慢,预 ...
- HTML 速成
html零基础者入. 记得学计算机网络的时候好像有学过一些HTML,但没运用起来都忘光了.近来想学学如何写网页.就从html(HyperText Markup Language超文本标记语言)入手了. ...