最近使用jQuery開(kāi)發(fā)表單時(shí),遇到了一個(gè)問(wèn)題——無(wú)法提交文件!
之前一直使用HTML的form表單進(jìn)行文件上傳,但是想要通過(guò)Ajax進(jìn)行提交,就選擇使用jQuery。然后遇到了這個(gè)問(wèn)題。
問(wèn)題的表現(xiàn)很簡(jiǎn)單,就是點(diǎn)擊提交按鈕,但是后臺(tái)并沒(méi)有接收到文件。
// 表單提交事件 $('#myForm').submit(function(event) { event.preventDefault(); // 阻止表單的默認(rèn)提交 $.ajax({ url: '/api/upload', type: 'post', data: new FormData(this), // 使用FormData對(duì)象進(jìn)行提交 cache: false, contentType: false, processData: false, success: function(data) { console.log('上傳成功'); }, error: function(err) { console.log(err); } }); });
經(jīng)過(guò)一番查找和嘗試,我發(fā)現(xiàn)需要使用FormData對(duì)象進(jìn)行提交。這個(gè)對(duì)象可以幫助我們將表單數(shù)據(jù)轉(zhuǎn)換為一個(gè)可以用于Ajax提交的數(shù)據(jù)集。
但是,這里需要注意一點(diǎn),當(dāng)使用FormData時(shí),需要同時(shí)設(shè)置以下三個(gè)屬性:
cache: false, // 不緩存數(shù)據(jù) contentType: false, // 不設(shè)置內(nèi)容類型 processData: false, // 不處理數(shù)據(jù)
這是因?yàn)椋?dāng)上傳文件時(shí),需要確保請(qǐng)求不會(huì)被瀏覽器緩存,而且不需要設(shè)置內(nèi)容類型,因?yàn)檫@個(gè)由瀏覽器自動(dòng)處理。同時(shí),也不需要用jQuery來(lái)處理FormData對(duì)象,因?yàn)樗鼤?huì)自動(dòng)處理。
總之,如果遇到j(luò)Query表單無(wú)法提交文件,這時(shí)可以使用FormData對(duì)象進(jìn)行提交,并且需要設(shè)置上述三個(gè)屬性。