jQuery Ajax使用FormData對(duì)象上傳文件的方法
FormData對(duì)象,是可以使用一系列的鍵值對(duì)來(lái)模擬一個(gè)完整的表單,然后使用XMLHttpRequest發(fā)送這個(gè)"表單"。 在 Mozilla Developer 網(wǎng)站 使用FormData對(duì)象 有詳盡的FormData對(duì)象使用說(shuō)明。 但上傳文件部分只有底層的XMLHttpRequest對(duì)象發(fā)送上傳請(qǐng)求,那么怎么通過(guò)jQuery的Ajax上傳呢? 本文將介紹通過(guò)jQuery使用FormData對(duì)象上傳文件。
使用<form>表單初始化FormData對(duì)象方式上傳文件
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對(duì)象,不需要對(duì)數(shù)據(jù)做處理。
<form>標(biāo)簽添加enctype="multipart/form-data"屬性。
cache設(shè)置為false,上傳文件不需要緩存。
contentType設(shè)置為false。因?yàn)槭怯?lt;form>表單構(gòu)造的FormData對(duì)象,且已經(jīng)聲明了屬性enctype="multipart/form-data",所以這里設(shè)置為false。
上傳后,服務(wù)器端代碼需要使用從查詢參數(shù)名為file獲取文件輸入流對(duì)象,因?yàn)?lt;input>中聲明的是name="file"。 如果不是用<form>表單構(gòu)造FormData對(duì)象又該怎么做呢?
使用FormData對(duì)象添加字段方式上傳文件
HTML代碼
<div id="uploadForm"> <input id="file" type="file"/> <button id="upload" type="button">upload</button> </div>
這里沒(méi)有<form>標(biāo)簽,也沒(méi)有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()的第二個(gè)參數(shù)應(yīng)是文件對(duì)象,即$('#file')[0].files[0]。
contentType也要設(shè)置為‘false'。 從代碼$('#file')[0].files[0]中可以看到一個(gè)<input type="file">標(biāo)簽?zāi)軌蛏蟼鞫鄠€(gè)文件, 只需要在<input type="file">里添加multiple或multiple="multiple"屬性。
后臺(tái)接收文件:
<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對(duì)象上傳文件的方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jQuery Ajax 上傳文件處理方式介紹(推薦)
- JQuery.uploadify 上傳文件插件的使用詳解 for ASP.NET
- 一個(gè)簡(jiǎn)單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子
- jquery實(shí)現(xiàn)兼容IE8的異步上傳文件
- jQuery實(shí)現(xiàn)jQuery-form.js實(shí)現(xiàn)異步上傳文件
- jQuery插件ajaxFileUpload異步上傳文件
- 基于jQuery Ajax實(shí)現(xiàn)上傳文件
- jquery上傳插件fineuploader上傳文件使用方法(jquery圖片上傳插件)
- jQuery簡(jiǎn)單驗(yàn)證上傳文件大小及類型的方法
- Jquery實(shí)現(xiàn)異步上傳文件
相關(guān)文章
js/jq仿window文件夾移動(dòng)/剪切/復(fù)制等操作代碼
本篇文章主要介紹了js/jq仿window文件夾移動(dòng)/剪切/復(fù)制等操作代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-03-03使用delegate方法為一個(gè)tr標(biāo)簽加一個(gè)鏈接
這篇文章主要介紹了使用delegate方法為一個(gè)tr標(biāo)簽加一個(gè)鏈接,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù),需要的朋友可以參考下2014-06-06基于jquery的仿百度的鼠標(biāo)移入圖片抖動(dòng)效果
在鼠標(biāo)放到圖片上, 圖片會(huì)有個(gè)上下抖動(dòng)的特效。很喜歡這種感覺。在于是摸索了一下,下面是一些步驟。2010-09-09SuperSlide標(biāo)簽切換、焦點(diǎn)圖多種組合插件
SuperSlide 是致力于實(shí)現(xiàn)網(wǎng)站統(tǒng)一特效調(diào)用的函數(shù),能解決大部分標(biāo)簽切換、焦點(diǎn)圖切換等效果,還能多個(gè)slide組合創(chuàng)造更多的效果。(兼容ie內(nèi)核(包括無(wú)敵的 ie6)、webkit內(nèi)核、ff、opera等主流瀏覽器)。2015-03-03jQuery實(shí)現(xiàn)用方向鍵控制層的上下左右移動(dòng)
本文將會(huì)使用jquery實(shí)現(xiàn)以下功能:按下方向鍵時(shí),使層向相應(yīng)的方向平滑移動(dòng)20像素;四個(gè)方向鍵的鍵碼分別是37(左)、38(上)、39(右)和40(下),感興趣的朋友可以了解下2013-01-01jquery實(shí)現(xiàn)頁(yè)面常用的返回頂部效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)頁(yè)面常用的返回頂部效果代碼,感興趣的小伙伴們可以參考一下2016-03-03js和jQuery設(shè)置Opacity半透明 兼容IE6
對(duì)于每一個(gè)網(wǎng)站前端開發(fā)人員,常常都會(huì)遇到設(shè)置div透明度的需求,比如在實(shí)現(xiàn)圖片幻燈片切換效果經(jīng)常就需要使圖片淡入淡出。本文分別對(duì)原生js和jQuery在IE和其它瀏覽器中設(shè)置透明度的方法和相關(guān)注意事項(xiàng)進(jìn)行總結(jié)。2016-05-05jQuery+css實(shí)現(xiàn)炫目的動(dòng)態(tài)塊漂移效果
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的動(dòng)態(tài)塊漂移效果,涉及jQuery基于隨機(jī)數(shù)與時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01jQuery添加options點(diǎn)擊事件并傳值實(shí)例代碼
這篇文章主要介紹了jQuery添加options點(diǎn)擊事件并傳值實(shí)例代碼,非常具有參考價(jià)值,需要的朋友一起看下吧2016-05-05