通過(guò)傳統(tǒng)的 form 表單提交的方式上傳文件

<form id="uploadForm" action="" method="post" enctype="multipart/form-data"> 
 <p>上傳文件：<input type ="file" name="file"/></p> 
 <input type="submit" value="上傳"/> 
</form>

不過(guò)傳統(tǒng)的 form 表單提交會(huì)導(dǎo)致頁(yè)面刷新，但是在有些情況下，我們不希望頁(yè)面被刷新，這種時(shí)候我們都是使用 Ajax 的方式進(jìn)行請(qǐng)求的。

使用 serialize() 對(duì) form 表單進(jìn)行序列化提交

$.ajax({ 
 url: "", 
 type: "POST", 
 data: $('#uploadForm').serialize(), 
 success: function(data) { 
 }, 
 error: function(data) {
 } 
});

如上，通過(guò)$('#uploadForm').serialize()可以對(duì) form 表單進(jìn)行序列化，從而將 form 表單中的所有參數(shù)傳遞到服務(wù)端。

但是上述方式，只能傳遞一般的參數(shù)，上傳文件的文件流是無(wú)法被序列化并傳遞的。不過(guò)如今主流瀏覽器都開(kāi)始支持一個(gè)叫做 FormData 的對(duì)象，有了這個(gè)對(duì)象就可以輕松地使用 Ajax 方式進(jìn)行文件上傳了。

使用 FormData 進(jìn)行 Ajax 請(qǐng)求并上傳文件

<form id="uploadForm"> 
 <p>上傳文件：<input type="file" name="file" /></p> 
 <input type="button" value="上傳" onclick="upload()" /> 
</form>
function upload() { 
 var formData = new FormData($("#uploadForm")[0]); 
 $.ajax({ 
 url: '', 
 type: 'POST', 
 data: formData, 
 async: false, 
 cache: false, 
 contentType: false, 
 processData: false, 
 success: function(data) {
 }, 
 error: function(data) { 
 } 
 }); 
}

以上所述是小編給大家介紹的Ajax serialize() 表單進(jìn)行序列化方式上傳文件，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com