Ajax serialize() 表單進(jìn)行序列化方式上傳文件
通過傳統(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>
不過傳統(tǒng)的 form 表單提交會導(dǎo)致頁面刷新,但是在有些情況下,我們不希望頁面被刷新,這種時候我們都是使用 Ajax 的方式進(jìn)行請求的。
使用 serialize() 對 form 表單進(jìn)行序列化提交
$.ajax({ url: "", type: "POST", data: $('#uploadForm').serialize(), success: function(data) { }, error: function(data) { } });
如上,通過$('#uploadForm').serialize()可以對 form 表單進(jìn)行序列化,從而將 form 表單中的所有參數(shù)傳遞到服務(wù)端。
但是上述方式,只能傳遞一般的參數(shù),上傳文件的文件流是無法被序列化并傳遞的。不過如今主流瀏覽器都開始支持一個叫做 FormData 的對象,有了這個對象就可以輕松地使用 Ajax 方式進(jìn)行文件上傳了。
使用 FormData 進(jìn)行 Ajax 請求并上傳文件
<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)行序列化方式上傳文件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Ajax請求超時與網(wǎng)絡(luò)異常處理圖文詳解
最近在項(xiàng)目中遇到一個問題,當(dāng)加載數(shù)據(jù)量特別大的時候會出現(xiàn)加載超時現(xiàn)象,所以這篇文章主要給大家介紹了關(guān)于Ajax請求超時與網(wǎng)絡(luò)異常處理的相關(guān)資料,需要的朋友可以參考下2021-05-05ajax中指定innerHTML時如何應(yīng)用其中的SCRIPT的研究
ajax中指定innerHTML時如何應(yīng)用其中的SCRIPT的研究...2007-03-03AJAX實(shí)現(xiàn)文件上傳功能報錯Current request is not a&n
這篇文章主要介紹了AJAX文件上傳功能實(shí)現(xiàn)中出現(xiàn)報錯Current request is not a multipart request的問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07使用getJSON()異步請求服務(wù)器返回json格式數(shù)據(jù)的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄褂胓etJSON()異步請求服務(wù)器返回json格式數(shù)據(jù)的實(shí)現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06Ajax實(shí)現(xiàn)的異步傳輸與驗(yàn)證示例代碼
Ajax異步傳輸應(yīng)用很廣當(dāng)用戶注冊時,當(dāng)用戶剛一輸完,立即判斷用戶是否存在這就用到了異步傳輸2014-01-01