JavaScript使用Ajax上傳文件的示例代碼

2019-11-19 15:50:55

字體：大中小

來源：轉載

供稿：網友

本文介紹了JavaScript使用Ajax上傳文件的示例代碼，分享給大家，具體如下：

實現文件的上傳主要有兩種方式：

使用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設置為false。因為data值是FormData對象，不需要對數據做處理。
<form>標簽添加enctype="multipart/form-data"屬性。
cache設置為false，上傳文件不需要緩存。
contentType設置為false。因為是由<form>表單構造的FormData對象，且已經聲明了屬性enctype="multipart/form-data"，所以這里設置為false。

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

html代碼如下：

<div id="uploadDiv">  <input id="file" type="file"/>  <button id="upload" type="button">上傳</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,  success:function(res){     console.log(res);  }

這里有幾處不一樣：

append()的第二個參數應是文件對象，即$('#file')[0].files[0]。contentType也要設置為false。
從代碼$('#file')[0].files[0]中可以看到一個<input type="file">標簽能夠上傳多個文件，只需要在<input type="file">里添加multiple或multiple="multiple"屬性。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。

上一篇：js實現省市級聯效果分享

下一篇：jquery對table做排序操作的實例演示