FormData 和 Iframe上传文件的两种方式

摘要：还特别介绍一种用使用对象上传文件的方法。设置为上传文件不需要缓存。用上传文件因为不是所有浏览器都支持的，所以有时候需要用来实现文件上传的功能。

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

创建一个空的FormData对象，然后再用append方法逐个增加键值对

var formdata = new FormData();
formdata.append("name","xx");
formdata.append("flie", filename);

取得form元素对象，将它作为参数传入FormData对象中。

var formOjb = document.getElementById("form");
var formdata = new FormData(formOjb );

利用form元素对象的getFormData方法生成它

var formobj = document.getElementById("form");
var formdata = formobj.fetFormData();

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

var formEl = document.getElementById("form");
formData = formEl.getFormData();
formData.append("serialnumber", serialNumber++);
xhr.send(formData);

还特别介绍一种用jQuery使用formData对象上传文件的方法。

    
    upload

javascript代码

$.ajax({
    url: "/upload",
    type: "POST",
    cache: false,
    data: new FormData($("#uploadForm")[0]),
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

注意点：

processData设置为false。因为data值是formData对象，不需要对数据进行处理。

    
    upload

var formData = new FormData();
formData.append("file", $("#file")[0].files[0]);
$.ajax({
    url: "/upload",
    type: "POST",
    cache: false,
    data: formData,
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

js代码

var iframe = $("