使用FormData对象

使用FormData对象

      利用FormData对象，可以使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest对象来发送这个“表单”。

创建一个FormData对象

    我们可以先创建一个空的FormData对象,然后使用append()方法向该对象里添加字段,如下:

var formdata = new FormData();
 formdata.append('username','groucho');
 formdata.append('account',123456); //数字123456被立即转换成字符串‘123456’

 var oReq = new XMLHttpRequest();
 oReq.open('post','http://foo.com/submitform.php');
 oReq.send(formdata);

在该例子中,我们创建了一个名为formdata的FormData对象,该对象中包含了名为"username", "accountnum"的字段名,然后使用XMLHttpRequest的send()方法把这些数据发送了出去.

使用html表单来初始化一个FormData对象

可以用一个已有的<form>元素来初始化FormData对象,只需要把这个form元素作为参数传入FormData构造函数即可:

var newFormData = new FormData(someFormElement);

你还可以在已有的表单基础上，继续添加新的键值对，如下：

var formElement = document.getElementById('myFormElement');
var formdata = new FormData(formElement);
formdata.append('address','wuhan');
var oReq = new XMLHttpRequest();
oReq.open('post','http://foo.com/submitform.php');
oReq.send(formdata);

使用FormData对象发送文件

你还可以使用FormData来发送二进制文件，首先在HTML中要有一个包含了文件输入框的form元素：

<form enctype='multipart/form-data' method='post' name='fileinfo'>
    <label for="">your email address:</label>
    <input type="email" autocomplete='on' autofocus name='userid' placeholder='email' required maxlength='64'/><br>
    <label for="">custom file label:</label>
    <input type="text" name='filelabel' size='12' maxlength='32'><br>
    <label for="">file to stash:</label>
    <input type="file" name="file" required>
</form>

然后你就可以使用下面的代码来异步上传用户选择的文件：

function sendForm(){
    var oOutput = document.getElementById('output');
    var oData = new FormData(document.forms.namedItem('fileinfo'));

    oData.append('customField','this is some extra data');

    var oReq = new XMLHttpRequest();
    oReq.open('POST','stash.php',true);
    oReq.onload = function(oEvent){
        if(oReq.status == 200){
            oOutput.innerHTML = 'Uploaded!';
        }else{
            oOutput.innerHTML = 'Error '+oReq.status+' occurred uploading your file!<br/>';
        }
    };
    oReq.send(oData);
}

你还可以使用jQuery来发送FormData，但必须要正确的设置相关选项：

var fd = new FormData(document.getElementById("fileinfo"));
fd.append("CustomField", "This is some extra data");
$.ajax({
    url: "stash.php",
    type: "POST",
    data: fd,
    processData: false,  // 告诉jQuery不要去处理发送的数据
    contentType: false   // 告诉jQuery不要去设置Content-Type请求头
});