原理：
dom收集表單信息，利用FormData快速收集表單信息 ，實例化表單數據對象 同時收集fm的表單域信息。
var fd = new FormData(fm); //實例化對象
alert(fd);
fd對象內部有收集的form表單域信息
ajax傳遞表單信息
1.靜態顯示頁面代碼
<!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實現form表單信息收集
var fd = new FormData(fm);
//fd 內部會把普通表單域 和 上傳文件域 的信息都收集
//ajax傳遞表單信息
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
//設置監聽事件ajax.upload.onprogress
xhr.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實現 無刷新文件上傳</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頁面代碼
服務器保存附件名字為本身名字
本地文件------>上傳(php程序處理)------>服務器
本地文件名字的 字符集 gb2312
php程序的 字符集 utf-8--->gb2312 (在程序裡邊把utf-8編碼的附件名字 轉碼為 gb2312)服務器的 字符集 gb2312
<?php
//$_FILES['user_pic']['error']
//0->ok 1->大小超過php.ini限制 2->大小超過MAX_FILE_SIZE限制
//3->附件只上傳了一部分(不完整) 4->沒有上傳附件
if($_FILES['user_pic']['error']>0){
exit('上傳附件有問題，有可能沒有附件');
}
//服務器保存附件名字為本身名字
//本地文件------>上傳(php程序處理)------>服務器
//本地文件名字的 字符集 gb2312
//php程序的 字符集 utf-8--->gb2312
// (在程序裡邊把utf-8編碼的附件名字 轉碼為 gb2312)
//服務器的 字符集 gb2312
$name = $_FILES['user_pic']['name'];
$name = iconv('UTF-8','GB2312',$name); //$name的編碼由utf-8---變為--->gb2312
$path = "./upload/";
//附件上傳邏輯
//move_uploaded_file(臨時路徑名，真實路徑名);
if(move_uploaded_file($_FILES['user_pic']['tmp_name'],$path.$name))
echo "success";
else
echo "fail";
下面看下jQuery 將form表單通過ajax實現無刷新提交的實例代碼。
代碼如下所示：
//將form轉換為AJAX提交
function ajaxSubmit(url,frm,fn){
var dataPara=getFormJson(frm);
$.ajax({
url:url,
type:"post",
data:dataPara,
async:false,
dataType:'txt',
success:fn
});
}
//將form中的值轉換為鍵值對
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;
}
/*
//前台調用方式
function autoSubmitFun(){
ajaxSubmit("autoSumitScoreAJAX.action",$('#formId'),function(){});
}
*/
以上所述是小編給大家介紹的Ajax+FormData+javascript實現無刷新表單信息提交，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！