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. Robotium源码分析之Instrumentation进阶-attach

    在分析Robotium的运行原理之前,我们有必要先搞清楚Instrumentation的一些相关知识点,因为Robotium就是基于Instrumentation而开发出来的一套自动化测试框架.鉴于之 ...

  2. JavaEE——Intellij Idea 创建JavaWeb项目

    原文:JavaEE--Intellij Idea 创建JavaWeb项目 折腾Tomcat折腾了两个晚上,第一个晚上怎么都进不了Tomcat的首页,第二个晚上进去了,但是新建的Web项目,在浏览器中运 ...

  3. WebView Android 调用js且须要获取返回结果

    Android webView调用js方法非常easy, webView.loadUrl("javascrpt:yourFunction()"); 可是此方法没有办法获取返回结果 ...

  4. Cocos2d-x3.0 Json解析

    2dx3.0下一个JSON解析库官员以及集成.我们参考一下吧OK. JSON文件hello.json内容 {"pets":["dog","cat&qu ...

  5. ExtJs--12--Ext定义类的requires uses singleton 三个配置项的使用

    Ext.onReady(function(){ /* * requires uses singleton 三个配置项的使用 */ Ext.define("A",{ //requir ...

  6. HDU 2079-课程时间(生成函数)

    课程时间(标题已被修改,注意阅读题) Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  7. C语言生成2000w行数据

    最近一直抽空学习shell,脚本语言看多了多多少少有些蛋疼不适,所以捡起以前遇到的一个C语言的问题看看. 原先应该是在C++吧关注的一个帖子,楼主为了测试数据库性能需要如下形式的数据要求: 字符串长度 ...

  8. Android 使用Gson解析json案例具体解释

    一.眼下解析json有三种工具:org.json(Java经常使用的解析),fastjson(阿里巴巴project师开发的),Gson(Google官网出的),解析速度最快的是Gson,下载地址:h ...

  9. object 插入元素，插入HTML页面

    object标签用于定义一个嵌入的对象,包括:图像.音频.Java applets.ActiveX.PDF以及Flash.该标签允许您规定插入HTML文档中的对象的数据和参数,以及可用来显示和操作数据 ...

  10. web开发与设计--js数据类型，js运营商

    1. js数据类型划分:号码值类型,布尔,串 由typeof能够看到什么类型的数据被详述. 举例: <span style="font-family:Microsoft YaHei;f ...