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. c# md5

              还可以加盐,更难以破解 public static string GetMD5(string sDataIn)           {               MD5Crypt ...

  2. C语言 链表

    原文:C语言 链表 最近在复习数据结构,想把数据结构里面涉及的都自己实现一下,完全是用C语言实现的. 自己编写的不是很好,大家可以参考,有错误希望帮忙指正,现在正处于编写阶段,一共将要实现19个功能. ...

  3. windows phone开发－Webbrowser使用技巧

    原文:windows phone开发-Webbrowser使用技巧 5月份开发了脸萌WP版,其中需要使用web技术来绘制图像,于是就使用了原生webbrowser控件.在使用webbrowser co ...

  4. 谢绝艳照门 - 手把手教你把当今很hit的家庭监控IP Camera变得网络安全起来

    IP Camerars现在已经越来越便宜了,很多人都可以买得起,并且大家也乐意去购买,因为它们的确是用来监控你在高房价的中国购买的爱巢的非常便利的设备.当然,配套的监控应用也层出不穷,从通用的家庭安全 ...

  5. jQuery选取和操纵元素的特点

    jQuery选取和操纵元素的特点 JavaScript选取元素 先来看看不用jQuery的时候我们是怎么处理元素选取的. JavaScript选取元素的时候,可以根据id获取元素,当id不存在的时候, ...

  6. lua本学习笔记功能

    Lua本学习笔记功能 1.  函数返回 指定任务的主要功能是完成,在这种情况下,函数被用作调用语句.函数可以计算并返回值,在这种情况下,作为分配值表达式语句使用. 语法: funcationfunc_ ...

  7. Asterisk 未来之路3.0_0001

    原文:Asterisk 未来之路3.0_0001 第一章:电信技术革命 刚开始他们忽视你,然后他们嘲笑你,然后他们向你挑战,最后你赢了 ---Mahatma Ganhdi 在5年前,我最初规划写一本关 ...

  8. Java泛型和集合之泛型介绍

    在声明一个接口和类的时候可以使用尖括号带有一个或者多个参数但是当你在声明属于一个接口或者类的变量的时候或者你在创建一个类实例的时候需要提供他们的具体类型.我们来看下下面这个例子 List<Str ...

  9. javascript脚本化文档

    1.getElememtById /** * 获取指定id的的元素数组 */ function getElements(/*ids...*/) { var elements = {}; for(var ...

  10. DefaultModelBinder

    Asp.net MVC的Model Binder工作流程以及扩展方法(3) - DefaultModelBinder Default Binder是MVC中的清道夫,把守着Model Binder中的 ...