jQuery Ajax使用FormData對象上傳檔案的方法_jquery

FormData對象，是可以使用一系列的索引值對來類比一個完整的表單，然後使用XMLHttpRequest發送這個"表單"。 在 Mozilla Developer 網站 使用FormData對象 有詳盡的FormData對象使用說明。 但上傳檔案部分只有底層的XMLHttpRequest對象發送上傳請求，那麼怎麼通過jQuery的Ajax上傳呢？ 本文將介紹通過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"。 如果不是用<form>表單構造FormData對象又該怎麼做呢？

使用FormData對象添加欄位方式上傳檔案

HTML代碼

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

這裡沒有<form>標籤，也沒有enctype="multipart/form-data"屬性。 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) {});

這裡有幾處不一樣：

append()的第二個參數應是檔案對象，即$('#file')[0].files[0]。

contentType也要設定為‘false'。 從代碼$('#file')[0].files[0]中可以看到一個<input type="file">標籤能夠上傳多個檔案， 只需要在<input type="file">裡添加multiple或multiple="multiple"屬性。

後台接收檔案：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="defaultEncoding" value="utf-8"/></bean>@RequestMapping(value = "/import_tg_resource")public ModelAndView import_tg_resource(@RequestParam(value = "file", required = false) MultipartFile[] files, HttpServletRequest request, ModelMap model) {System.out.println("開始批量上傳:檔案數量：" + files.length);for (MultipartFile file : files ) {String path = request.getSession().getServletContext().getRealPath("upload");String fileName = file.getOriginalFilename();String prefix = fileName.substring(fileName.lastIndexOf("."));fileName = new Date().getTime() + prefix;// System.out.println("儲存路徑 " + path);File targetFile = new File(path, fileName);if(!targetFile.exists()){targetFile.mkdirs();}file.transferTo(targetFile);}}

以上所述是小編給大家介紹的jQuery Ajax使用FormData對象上傳檔案的方法，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！