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. iOS开发---转换坐标系

    - (void)viewDidLoad { [super viewDidLoad]; // 蓝色 UIView *blue = [[UIView alloc] init]; blue.backgrou ...

  2. POJ 1035 代码+具体的目光

    Spell checker Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 19319 Accepted: 7060 Descri ...

  3. C语言利用va_list、va_start、va_end、va_arg宏定义可变參数的函数

    在定义可变參数的函数之前,先来理解一下函数參数的传递原理: 1.函数參数是以栈这样的数据结构来存取的,在函数參数列表中,从右至左依次入栈. 2.參数的内存存放格式:參数的内存地址存放在内存的堆栈段中, ...

  4. C# Winform 界面线程的Invoke死锁，以及Application.DoEvent的问题

    1.对于非界面线程来说,Invoke是把一个操作丢到界面线程的队列里,然后阻塞,等到这个操作被界面线程完成后,才继续后续操作.也就是说,Invoke是同步的. 问题来了,如果界面线程此时正在等待这个非 ...

  5. sql点滴40—mysql乱码问题总结

    原文:sql点滴40-mysql乱码问题总结 本文将为大家讲解如何处理Java连接过程中的MySQL中文乱码问题.一般MySQL中文乱码问题都是与字符集有关,这里作者的经历也大致差不多. MySQL默 ...

  6. PHP 11：函数

    原文:PHP 11:函数 本文章介绍PHP的函数.如何学习呢?可以从以下几个方面考虑 函数是如何定义的?区分大小写吗? 函数的参数是如何定义的? 函数是否支持重载? 函数的返回值是如何定义的. 函数有 ...

  7. Callback

    由于 JavaScript 语句(指令)是逐一执行的 - 按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成. 为了避免这个情况,您可以以参数的形式添加 Callback 函数. j ...

  8. Swift辛格尔顿设计模式(SINGLETON)

    本文已更新为2.0语法,具体查看:一叶单例模式 一.意图 保证一个类公有一个实例.并提供一个訪问它的全局訪问点. 二.使用场景 1.使用场景 当类仅仅能有一个实例并且客户能够从一个众所周知的訪问点訪问 ...

  9. 使用Windows2003创建AD服务器 - 进阶者系列 - 学习者系列文章

    Windows 2003的AD功能不是很强,但是还是提供了不错的功能.下面简要介绍下Windows 2003的AD配置说明. 1.  从添加删除Windows组件安装AD功能项 2.  完成安装.这里 ...

  10. 《互联网初创企业password》书评

    今天试用了一下<互联网初创企业password>这本书.我觉得这本书开始的很真实,从学校刚毕业那会儿.它是生命,他们的牛b时间,一直想做点什么来证明自己.具体地,并且现在是在最好的时候.互 ...