XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。

2008年 2 月，XMLHttpRequest Level 2 草案提出来了，相对于上一代，它有一些新的特性，其中 FormData就是 XMLHttpRequest Level 2 新增的一个对象 ，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。

（1）模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。

（2）异步上传二进制文件。

html :

<form action="" id="form">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="button" id="btn" value="提交">
</form>

• Formdata 对象不能用于 get 请求，因为对象需要被传递到 send 方法中，而 get 请求方式的请求参数只能放在请求地址的后面。
• 服务器端 bodyParser 模块不能解析 formData 对象表单数据，我们需要使用 formidable 模块进行解析。

1. 获取 表单对象中属性的值
   formData.get(‘key’);

var formData = new FormData(form); 
console.log(formData.get('username')); //张三

控制台输出结果：

2. 设置 表单对象中属性的值
   formData.set(‘key’, ‘value’);

var formData = new FormData(form);
rmData.set('username','李四');
console.log(formData.get('username')); //李四

控制台输出结果：

注意：set方法，如果设置的表单属性存在就覆盖它原有的值，如果设置的表单属性不存在则会创建这个表单属性。

3. 删除 表单对象的属性
   formData.delete(‘key’);

4. 向表单对象 追加 属性值
   formData.append(‘key’, ‘value’);

注意：set 方法与 append 方法的区别是，在属性名已存在的情况下，set 会覆盖已有键名的值，append会保留两个值。

var formData = new FormData(form);
FormData.append('username', '李四');

示例：
html :

<div class="container">
   <div class="form-group">
      <label>请选择文件</label>
      <input type="file" id="file">
      <div class="padding" id="box">
         <!--<img src="" class="img-rounded img-responsive">-->
      </div>
      <div class="progress">
         <div class="progress-bar" style="width: 0%;" id="bar">0%</div>
      </div>
   </div>
</div>

<div class="container">
   <div class="form-group">
      <label>请选择文件</label>
      <input type="file" id="file">
      <div class="padding" id="box">
         <!--<img src="" class="img-rounded img-responsive">-->
      </div>
      <div class="progress">
         <div class="progress-bar" style="width: 0%;" id="bar">0%</div>
      </div>
   </div>
</div>
<script type="text/javascript">
   // 获取文件选择控件
   var file = document.getElementById('file');
   // 获取进度条元素
   var bar = document.getElementById('bar');
   // 获取图片容器
   var box = document.getElementById('box');
   // 为文件选择控件添加onchanges事件
   // 在用户选择文件时触发
   file.onchange = function () {
      // 创建空的formData表单对象
      var formData = new FormData();
      // 将用户选择的文件追加到formData表单对象中
      formData.append('attrName', this.files[0]);
      // 创建ajax对象
      var xhr = new XMLHttpRequest();
      // 对ajax对象进行配置
      xhr.open('post', 'http://localhost:3000/upload');
      // 在文件上传的过程中持续触发
      xhr.upload.onprogress = function (ev) {
         // ev.loaded 文件已经上传了多少
         // ev.total  上传文件的总大小
         var result = (ev.loaded / ev.total) * 100 + '%';
         // 设置进度条的宽度
         bar.style.width = result;
         // 将百分比显示在进度条中
         bar.innerHTML = result;
      // 发送ajax请求
      xhr.send(formData);
      // 监听服务器端响应给客户端的数据
      xhr.onload = function () {
         // 如果服务器端返回的http状态码为200
         // 说明请求是成功的
         if (xhr.status == 200) {
            // 将服务器端返回的数据显示在控制台中
            var result = JSON.parse(xhr.responseText);
            // 动态创建img标签
            var img = document.createElement('img');
            // 给图片标签设置src属性
            img.src = result.path;
            // 当图片加载完成以后
            img.onload = function () {
               // 将图片显示在页面中
               box.appendChild(img);
                    什么是FormData对象？XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月，XMLHttpRequest Level 2 草案提出来了，相对于上一代，它有一些新的特性，其中 FormData就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。For
				
本文实例讲述了PHP使用HTML5 FormData对象提交表单操作。分享给大家供大家参考，具体如下：
这是HTML5中新增的一个Api，他能以表单对象作为参数，自动的把表单的数据打包，当ajax发送数据时，发送这个FormData对象，以达到发送表单数据的目的。
参数是一个form节点对象
var fm = document.getElementById('formid');
var fd = new FormData(fm);
（1）在以往的ajax做post请求时，当提交的数据比较多时，需要拼接请求的字符串，如：k1=v1&k2=v2...，使用FormData对
				
写在前面：本文说的这个方案有浏览器兼容性问题；所有主流浏览器的较新版本已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+，对兼容性比较敏感的网站慎用。
在工作中遇到了一个问题：在一个页面中，有4块内容，每块内容都包含一个图片上传功能，希望可以实现一键把这四块内容都上传上去。
我没有用插件实现上传功能，就是用的input[type=file]，因此就遇到一个问题就是：
①传统的form表单会导致页面刷新，无法实现上述功能
②把表单serialize()序列化用Ajax的方式提交，也无法把上传文件的文件流进行序列化，也不行
 <groupId>commons-fileupload</groupId>
 <artifactId>commons-fileupload</artifactId>
 <version>1.3.2</version>
</dependency>
  <h1>Ajax 文件上载</h1>
  <input type=file id=file1> <br>
  <input type=file id=file2>
				
FormData对象的介绍与使用方法一. FormData对象介绍二. 创建FormData的实例对象1. 使用构造函数创建一个空的实例对象2. 使用已有的表单来初始化一个实例对象三. 使用方法1. 获取值2. 添加数据3. 设置修改数据4. 判断是否存在该数据5. 删除数据
一. FormData对象介绍
FormData对象其实是在XMLHttpRequest 2级定义的，定义它的目的就是为序列化表单以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。
二. 创建FormData的实例对象
				
formdata对象作用：可以将表单对象作为参数传递到服务器端，还可以传递二进制数据格式文件，
用formdata对象传递表单，需要将表单转换为formdata对象:new FormData(form)，然后可以将这个对象放在send()中进行提交，也正是这样，不能用get方法传递，而使用post方法传递；(因为get方法再url中传递参数)代码如下，写的不好的地方还请大家见谅：
    <!-- 创建普通html表单 -->
    <form id="f
				
FormData
1. 概述
FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。
2. 构造函数
创建一个formData对象实例有几种方式
1、创建一个空对象实例
var formData = new FormData();
此时可以调用ap...
				解决：输入$ git push origin master后跳出的窗口无登陆密码框，而是提示：connect to Github sign in with your brower的问题