實現(xiàn)文件的上傳主要有兩種方式：

使用form表單提交上傳

html代碼如下：

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

此時的JavaScript代碼如下：

 var formData = new FormDate($('#uploadForm')[0]);

 $.ajax({
                url: 'http://10.10.2.254:8080/file/associateupload',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                success:function(res){
                        console.log(res);
                }
        });

需要注意：

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

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

html代碼如下：

<div id="uploadDiv">
    <input id="file" type="file"/>
    <button id="upload" type="button">上傳</button>
</div>

JavaScript實現(xiàn)如下：

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

這里有幾處不一樣：

• append()的第二個參數(shù)應(yīng)是文件對象，即$('#file')[0].files[0]。
  contentType也要設(shè)置為false。
• 從代碼$('#file')[0].files[0]中可以看到一個<input type="file">標簽?zāi)軌蛏蟼鞫鄠€文件，只需要在<input type="file">里添加multiple或multiple="multiple"屬性。

轉(zhuǎn)載至http://www.itdecent.cn/p/46e6e03a0d53