jQuery Ajax使用FormData對象上傳文件的方法
FormData對象,是可以使用一系列的鍵值對來模擬一個完整的表單,然后使用XMLHttpRequest發(fā)送這個"表單"。 在 Mozilla Developer 網(wǎng)站 使用FormData對象 有詳盡的FormData對象使用說明。 但上傳文件部分只有底層的XMLHttpRequest對象發(fā)送上傳請求,那么怎么通過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設(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。
上傳后,服務(wù)器端代碼需要使用從查詢參數(shù)名為file獲取文件輸入流對象,因為<input>中聲明的是name="file"。 如果不是用<form>表單構(gòu)造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()的第二個參數(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"屬性。
后臺接收文件:
<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("開始批量上傳:文件數(shù)量:" + 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對象上傳文件的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- jQuery Ajax 上傳文件處理方式介紹(推薦)
- JQuery.uploadify 上傳文件插件的使用詳解 for ASP.NET
- 一個簡單的jQuery插件ajaxfileupload.js實現(xiàn)ajax上傳文件例子
- jquery實現(xiàn)兼容IE8的異步上傳文件
- jQuery實現(xiàn)jQuery-form.js實現(xiàn)異步上傳文件
- jQuery插件ajaxFileUpload異步上傳文件
- 基于jQuery Ajax實現(xiàn)上傳文件
- jquery上傳插件fineuploader上傳文件使用方法(jquery圖片上傳插件)
- jQuery簡單驗證上傳文件大小及類型的方法
- Jquery實現(xiàn)異步上傳文件
相關(guān)文章
js/jq仿window文件夾移動/剪切/復(fù)制等操作代碼
本篇文章主要介紹了js/jq仿window文件夾移動/剪切/復(fù)制等操作代碼,非常具有實用價值,需要的朋友可以參考下。2017-03-03js和jQuery設(shè)置Opacity半透明 兼容IE6
對于每一個網(wǎng)站前端開發(fā)人員,常常都會遇到設(shè)置div透明度的需求,比如在實現(xiàn)圖片幻燈片切換效果經(jīng)常就需要使圖片淡入淡出。本文分別對原生js和jQuery在IE和其它瀏覽器中設(shè)置透明度的方法和相關(guān)注意事項進行總結(jié)。2016-05-05jQuery+css實現(xiàn)炫目的動態(tài)塊漂移效果
這篇文章主要介紹了jQuery+css實現(xiàn)的動態(tài)塊漂移效果,涉及jQuery基于隨機數(shù)與時間函數(shù)動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01