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

用AJAX上传文件，一般都是用FormData对象。

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

FormData的使用

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

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

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

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

3. 利用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对象上传文件的方法。

使用<form>表单初始化FormData对象方式上传文件

HTML代码

<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
</form>

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对象，不需要对数据进行处理。

• <form>标签添加enctype="multipart/form-data"属性。

• cache设置为false, 上传文件不需要缓存。

• contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false.

上传后，服务器代码需要从查询参数名为file获取文件输入流对象，因为<input>中声明的是name="file".

使用FormData对象添加字段方式上传文件

HTML代码

<div id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</div>

javascript代码

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) {});

从$('#file')[0].files[0] 中可以看出一个<input type="file"> 标签可以上传多个文件，只要在这个标签中添加multiple或multiple="multiple"属性。

用Ifrmae上传文件

因为FormData不是所有浏览器都支持的，所以有时候需要用iframe来实现文件上传的功能。

HTML代码

<div id="uploadform">
    <form id="theuploadform" action="">
        <input id="userfile" name="userfile" size="50" type="file" />
        <input id="formsubmit" type="submit" value="Send File" />
    </form>
</div>
<div id="iframe" style="width: 0px; height: 0px; display: none;">
</div>

js代码

var iframe = $('<iframe name="postframe" id="postframe" class="hidden" src="about:none" />');
$('div#iframe').append(iframe);
$('#theuploadform').attr("action", "/upload.do")
$('#theuploadform').attr("method", "post")
$('#theuploadform').attr("enctype", "multipart/form-data")
$('#theuploadform').attr("encoding", "multipart/form-data")
$('#theuploadform').attr("target", "postframe")

//need to get contents of the iframe

$("#postframe").load(function () {
    iframeContents = $("iframe")[0].contentDocument.body.innerHTML;
    $("div#textarea").html(iframeContents);
});
$('#theuploadform').submit();
return false;