原理：
dom收集表單信息，利用FormData快速收集表單信息 ，實(shí)例化表單數(shù)據(jù)對象 同時(shí)收集fm的表單域信息。
var fd = new FormData(fm); //實(shí)例化對象
alert(fd);
fd對象內(nèi)部有收集的form表單域信息
ajax傳遞表單信息
1.靜態(tài)顯示頁面代碼
<!DOCTYPE html ><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript">window.onload = function(){var fm = document.getElementsByTagName('form')[0];fm.onsubmit = function(){//利用FormData實(shí)現(xiàn)form表單信息收集var fd = new FormData(fm);//fd 內(nèi)部會把普通表單域 和 上傳文件域 的信息都收集//ajax傳遞表單信息var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState==4){alert(xhr.responseText);}}//設(shè)置監(jiān)聽事件ajax.upload.onprogressxhr.upload.onprogress = function(evt){//感知附件上傳情況,利用事件對象感知var loaded = evt.loaded;var total = evt.total;var per = Math.floor((loaded/total)*100)+"%";document.getElementById('son').innerHTML = per;document.getElementById('son').style.width = per;}xhr.open('post','./05.php');xhr.send(fd);return false;//組織瀏覽器提交}}</script><style type="text/css">#pat {width:430px;height:40px; border:5px solid blue;}#son {width:0;height:100%; background-color:lightblue;}</style></head><body><h2>ajax+FormData實(shí)現(xiàn) 無刷新文件上傳</h2><form method="post" action="" ><p>用戶名：<input type="text" name="username" /></p><p>密碼：<input type="password" name="password" /></p><p>郵箱：<input type="text" name="email" /></p><div id="pat"><div id="son"></div></div><p>頭像：<input type="file" name="user_pic" /></p><p><input type="submit" value="注冊" /></p></form></body></html>2.php頁面代碼
服務(wù)器保存附件名字為本身名字
本地文件------>上傳(php程序處理)------>服務(wù)器
本地文件名字的 字符集 gb2312
php程序的 字符集 utf-8--->gb2312 (在程序里邊把utf-8編碼的附件名字 轉(zhuǎn)碼為 gb2312)服務(wù)器的 字符集 gb2312
<?php//$_FILES['user_pic']['error']//0->ok 1->大小超過php.ini限制 2->大小超過MAX_FILE_SIZE限制 //3->附件只上傳了一部分(不完整) 4->沒有上傳附件if($_FILES['user_pic']['error']>0){exit('上傳附件有問題，有可能沒有附件');}//服務(wù)器保存附件名字為本身名字//本地文件------>上傳(php程序處理)------>服務(wù)器//本地文件名字的 字符集 gb2312//php程序的 字符集 utf-8--->gb2312// (在程序里邊把utf-8編碼的附件名字 轉(zhuǎn)碼為 gb2312)//服務(wù)器的 字符集 gb2312$name = $_FILES['user_pic']['name'];$name = iconv('UTF-8','GB2312',$name); //$name的編碼由utf-8---變?yōu)?-->gb2312$path = "./upload/";//附件上傳邏輯//move_uploaded_file(臨時(shí)路徑名，真實(shí)路徑名);if(move_uploaded_file($_FILES['user_pic']['tmp_name'],$path.$name))echo "success";elseecho "fail";下面看下jQuery 將form表單通過ajax實(shí)現(xiàn)無刷新提交的實(shí)例代碼。
代碼如下所示：
//將form轉(zhuǎn)換為AJAX提交 function ajaxSubmit(url,frm,fn){ var dataPara=getFormJson(frm); $.ajax({ url:url, type:"post", data:dataPara, async:false, dataType:'txt', success:fn }); } //將form中的值轉(zhuǎn)換為鍵值對 function getFormJson(frm){ var o={}; var a=$(frm).serializeArray(); $.each(a,function(){ if(o[this.name]!==undefined){ if(!o[this.name].push){ o[this.name]=[o[this.name]]; } o[this.name].push(this.value || ''); }else{ o[this.name]=this.value || ''; } }); return o; }/* //前臺調(diào)用方式 function autoSubmitFun(){ ajaxSubmit("autoSumitScoreAJAX.action",$('#formId'),function(){}); }*/以上所述是小編給大家介紹的Ajax+FormData+javascript實(shí)現(xiàn)無刷新表單信息提交，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
