FormData

概述

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(key data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。key是唯一的，一个key可能对应多个value。如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。

 

构造函数

1.创建一个空对象实例

  var formData = new FormData();

此时可以调用append()方法来添加数据。

formData.append('user','username');
formData.get('user');  // 获取
formData.delete('user');  // 删除

 

2、使用已有的表单来初始化一个对象实例

<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密码
    <input type="submit" value="提交">
</form>

 

我们可以使用这个表单元素作为初始化参数，来实例化一个formData对象。

// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form[0]);

 

因为new FormData需要的是一个HtmlElement类型的数据，而jquery拿到的是HtmlElement集合，所以哪怕只有一个元素，也要用[0]取其第一个元素。 

// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码
// 当然也可以在此基础上，添加其他数据
formData.append("token","ccccccc");

 

获取

我们可以通过get(key)/getAll(key)来获取对应的value。

formData.get('name');  // 获取key为name的值

 

添加

我们可以通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾。

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v1"]

 

设置修改数据

我们可以通过set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值。

formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

 

判断是否有这数据

我们可以通过has(key)来判断是否有对应的key值。

formData.append("k1", "v1");
formData.append("k2",null);
formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false

 

通过delete(key)，来删除数据

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1"); 
formData.getAll("k1"); // []

 

遍历

我们可以通过entries()来获取一个迭代器，然后遍历所有的数据。

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");
var i = formData.entries();
i.next(); // {done:false, value:["k1", "v1"]}
i.next(); // {done:fase, value:["k1", "v2"]}
i.next(); // {done:fase, value:["k2", "v1"]}
i.next(); // {done:true, value:undefined}

我们也可以通过values()方法只获取value值。

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1"); 
var i = formData.entries();
i.next(); // {done:false, value:"v1"}
i.next(); // {done:fase, value:"v2"}
i.next(); // {done:fase, value:"v1"}
i.next(); // {done:true, value:undefined}

 

FormData+Ajax

对于包含图片、文件的表单做Ajax提交时，可以用FormData来封装数据，并提交到服务端。

<form id="addFeedbackForm" enctype='multipart/form-data'>
    <div class="form-group">
        作者：<span id="loginName" name="loginName"></span>
    </div>
    <div class="controls">
        <textarea id="describe" name="describe"></textarea>
    </div>
        <input id="f_upload" name="image" type="file" class="file" multiple />
    <div class="pull-left">
        <button type="button" id="submitButton" onclick="submit()" >提交</button>
    </div>
</form>

function submit(){
var formData = new FormData($("#form")[0]);
$.ajax({
        type:'post',
        url:'../../tmarket/updateUserInfo.action',
        data:formData,
        contentType: false,
        processData: false,
        success:function(){
            alert("修改成功");
        },
        error:function () {
            alert("修改失败！");
        }
        });
}

在Action中，可以通过request.getParameter("表单name属性值")方法来获取其中的数据。

如果是Struts2框架，还可以通过为标签的name值赋予" obj.name" 的形式，然后在Action中通过obj.getName()来获取。使用详情参考Struts2的表达式驱动。