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可实现异步传输二进制文件(即异步文件上传)的更多相关文章

  1. HTML5——摒弃插件和前端框架的异步文件上传

    之前我从来没有体会到HTML5的便利,直到这次需要一个异步上传的功能功能.一开始我以为文件的一些声明必须为HTML5才管用,后来才知道添加了很多以前没有的标签,并可以直接播放视频,音频等.可以不再使用 ...

  2. ajax异步文件上传和进度条

    一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...

  3. 异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  4. 前端异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  5. ajax异步文件上传，iframe方式

    不是我写的,我看了他的,思路很明确: 实现思路: 在js脚本中动态创建form,动态创建form中的内容,将文件上传的内容以隐藏域的方式提交过去,然后写好回调等. 感觉思路不难,但是我写不出来,感觉需 ...

  6. JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传

    异步上传相信大家都做过类似的功能,JqueryAjaxFileUploader为我们提供了更简单的实现和使用方式.不过既然是JQUERY的插件那么它所依赖的环境大家都懂得.JqueryAjaxFile ...

  7. 关于ajax 异步文件上传 node 文件后台接口

    <body> <img src="" alt="" id="img"> <input type="f ...

  8. asp.net MVC4 异步文件上传

    1.下载ajaxfileupload.js 2.在控制器内创建如下方法 //文件上传 public ActionResult uploadFile(HttpPostedFileBase file) { ...

  9. SpringMVC异步文件上传下载

    首先了解一下File的构造方法: File(String pathname):根据一个路径得到File对象 File(String parent,String child):根据一个目录和一个子文件/ ...

随机推荐

  1. PHP-微信公众平台开发-接收用户输入消息类型并响应

    原文:PHP-微信公众平台开发-接收用户输入消息类型并响应 <?php // 该代码块用于接收用户消息,根据用户输入的消息类型进行判断,文本,图片,视频,位置,链接,语音等,并取得值,处理后给予 ...

  2. PHP 使用用户自定义的比较函数对数组中的值进行排序

    原文:PHP 使用用户自定义的比较函数对数组中的值进行排序 usort (PHP 4, PHP 5) usort —      使用用户自定义的比较函数对数组中的值进行排序 说明       bool ...

  3. C语言中嵌入式SQL语句

    原文:[转载]C语言中嵌入式SQL语句 http://blog.csdn.net/cnlht/archive/2007/12/12/1930960.aspx原文地址 实验内容: 掌握SQL Serve ...

  4. [Node.js框架] 为什么要开发 Codekart 框架

    两年前,在被php的$符号和字符串处理折磨得半夜骂娘之后,我义无反顾地决定:珍爱生命,远离php. 之后一直在寻找一门“完美的语言”,先后接触了Lisp.python.java.Ruby.Lisp几乎 ...

  5. CodeIgniter框架文件结构

    转自网络:http://my.oschina.net/scholer/blog/99226 这个本来是很基础的东西,基本上用过CI的人都知道这些,原本是不消说的~但是因为毕业论文是关于CodeIgni ...

  6. 算法回顾--N皇后问题简单回顾

    前言 最近学习的过程中,不知道哪门子的思维发散,突然又遇见皇后问题了,于是乎老调重弹,心里琢磨,虽然思路大家都容易懂,哪怕是最简单的野蛮回溯法,说着简单,但是如果非得编码实现?我可以一次性写出来OK的 ...

  7. Oracle笔试题库之问答题篇-总共60道

    1.把表A从表空间TSP1更改成表空间TSP2的方法 解答:alter table A move tablespace TSP2 2.删除表的列: 解答:alert table 表名 drop 列名 ...

  8. Bootstrap 网格系统

    自版本 2.3.2 起,Bootstrap 提供了两种类型的网格,默认网格系统和流动网格系统.默认的网格系统是 940px 宽和 12 列.本文主要讲解第一种. 首先让我们看,怎么来应用默认网格系统 ...

  9. 如何在网页启动Windows服务

    由于公司有许多windows服务进行业务的处理,所以对服务的维护也是一个比较头痛的问题,因为自己也不知道服务什么时候自动停了,而且更主要的原因是服务都是由运维部门在维护管理,开发这边没有直接操作服务的 ...

  10. Windows使用SSH管理Ubuntu

    欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/manage-ubuntu-on-wind ...