FormData

今天的天气很不错，有风，有你，有太阳，但不热，随手写一下FormData。

FormDate是XMLHttpRequest level2 （有人说是FF4中新增加的对象，是谁无所谓啦）中新添加的一个接口，利用FormData对象，我们可以通过JavaScript用一下键值对来模拟表单控件，我们还可以使用使用ajax的send（）方法来异步提交这个‘表单’，比起之前（我们都是将表单中的name  和value组成一个querystring提交到后台），FormData是在是好用多了，比起普通的ajax提交来说，FormData的最大优点就是我们可以异步的上传一个二进制文件。

使用方式也很简单（感觉有点怪）

第一种：先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段

var formdata = new FormData();
formdata.append("name", "Manster");
formdata.append("age", 23);//这里的数字会被转为字符串
formdata.append("userfile", fileInputElement.files[0]);//fileInputElement中已经包含了用户所选择的文件
var oFileBody = '<a id="a"><b id="b">hey!</b></a>'; // Blob对象(二进制对象)包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});
oMyForm.append("webmasterfile", oBlob);

注: 字段"userfile"和"webmasterfile"的值都包含了一个文件.通过 FormData.append()方法赋给字段"age"的数字被自动转换为字符(字段的值可以是一个Blob对象,一个File对象,或者一个字符串,剩下其他类型的值都会被自动转换成字符串).

第二种：使用HTML表单来初始化一个FormData对象

<form action="" id="myForm">
    <input type="text" name="username">
    <input type="text" name="password">
</form>
</body>
<script>
    var formobj =  document.getElementById("myForm");
    var formdata = new FormData(formobj);
    formdata.append("school","上海交大");//用这种方式你可以添加一些用户不可见的键值
</script>

第三种：利用form元素对象的getFormData方法生成它！

var formobj =  document.getElementById("myForm");
var formdata = formobj.getFormData()

注意，formdata是一个不透明的对象，现在暂时只有一个append可以操作，不能通过序列化手段得到其里面的内容，这实在是遗憾。它的用法现在也只有一个，用于增强型的XMLHttpRequest对象的send方法中去！

结合ajax我们就可以将FormData对象发送到服务器。

var formobj =  document.getElementById("form");
var formdata = new FormData(formobj);
formdata.append("name", "Manster");
formdata.append("age", 23);
var xhr = new XMLHttpRequest();
xhr.open('post','/upload',true);
xhr.onload = function(){
    //dosomething....
}
xhr.send(formdata)

后台获取方式看你使用的是什么语言了，我简单的用node写一个例子

var http = require('http');
var url = require('url');
var fs = require('fs');
var formidable = require('formidable');
http.createServer(function(req,res){
    var urlObj = url.parse(req.url,true)
    var pathname = urlObj.pathname;
    if(pathname == '/upload'){
        //formidable这个包，不是核心模块，第三方模块
        var form = new formidable.IncomingForm();
        form.parse(req,function(err,fields,files){
            console.log(fields)//--->{name:"Manster",age:"23"}
            console.log('--------------')
            console.log(files)//------->文件
            fs.createReadStream(files.fileContent.path).pipe(fs.createWriteStream('./upload/'+files.fileContent.name));
        })
        form.on('end',function(){
            res.end('上传完成')
        })
    }
}).listen(4004,function(){
    console.log('success')
})

如有不对，欢迎来喷！