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" /></p> <p>密码：<input type="password" /></p> <p>邮箱：<input type="text" /></p> <div><div></div></div> <p>头像：<input type="file" /></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实现无刷新表单信息提交，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: