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. u-boot学习(两)：u-boot简要分析

    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 看到不错的文章.不要加入收藏夹, ...

  2. DDD分层架构之聚合

    DDD分层架构之聚合 前面已经介绍了DDD分层架构的实体和值对象,本文将介绍聚合以及与其高度相关的并发主题. 我在之前已经说过,初学者第一步需要将业务逻辑尽量放到实体或值对象中,给实体“充血”,这样可 ...

  3. jQuery EasyUI API - Layout - Layout[原创汉化官方API]

    最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...

  4. JQuery -&gt; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  5. 使用JQUERY操作Radio

    发展中经常使用Radio为了实现用户的选择的影响.我在该项目中使用的一些JQUERY操作Radio该方法.这里分享,对于有需要的朋友参考的. 1.变化radio选择.引发一些结果 $("in ...

  6. sugarcrm关于邮件设置几个不好理解的地方

    陈沙克日志 把我的过程记录下来,以免以后忘了     2008-06-11 12:32 sugarcrm关于邮件设置几个不好理解的地方 最近看sugarcrm的使用,别的基本使用,没有什么问题,几天就 ...

  7. 【工作笔记五】html5的placeholder属性（IE如何兼容placeholder属性）

    placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...

  8. Object C和C#的差异

    从C#到Object C,循序渐进学习苹果开发(1)--准备开发账号和开发环境 本随笔系列主要介绍从一个Windows平台从事C#开发到Mac平台开发苹果开发的一系列感想和体验历程,本系列文章是在起步 ...

  9. 基于SQLite日志记录工具--Log4W

    最近压迫自己写点自己的东西,但是水平不高,槽点多,望各位请轻喷,嘿嘿! 以前用过一个Log4Net的东东,但是保存的是文本文件,不好过滤,而且用的不多,也不太熟悉,所以自己也当写一个练练手吧!     ...

  10. C# 让程序自动以管理员身份运行

    exe在Vista或Win7下不以管理员权限运行,会被UAC(用户帐户控制)阻止访问系统某些功能,如修改注册表操作等;如何让exe以管理员权限运行呢,方法有两种,一个是直接修改exe属性;另一个是在程 ...