二級標(biāo)題

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

這里要注意幾點(diǎn)：

• processData設(shè)置為false。因?yàn)閐ata值是FormData對象，不需要對數(shù)據(jù)做處理。
• <form>標(biāo)簽添加enctype="multipart/form-data"屬性。
• cache設(shè)置為false，上傳文件不需要緩存。
• contentType設(shè)置為false。因?yàn)槭怯?lt;form>表單構(gòu)造的FormData對象，且已經(jīng)聲明了屬性
  enctype="multipart/form-data"，所以這里設(shè)置為false。

使用FormData對象添加字段方式上傳文件

html如下

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

這里沒有<form>標(biāo)簽，也沒有enctype="multipart/form-data"屬性。

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

有幾處需要注意的地方

• append()的第二個參數(shù)應(yīng)是文件對象，即$('#file')[0].files[0]。
• contentType也要設(shè)置為‘false’。

從代碼$('#file')[0].files[0]中可以看到一個<input type="file">標(biāo)簽?zāi)軌蛏蟼鞫鄠€文件，
只需要在<input type="file">里添加multiple或multiple="multiple"屬性。