ajax+FormData+javascript实现无刷新表单信息提交
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax+FormData+javascript实现无刷新表单信息提交相关的知识，希望对你有一定的参考价值。
ajax+FormData+javascript实现无刷新表单信息提交
原理：
dom收集表单信息，利用FormData快速收集表单信息 ，实例化表单数据对象 同时收集fm的表单域信息。
var fd = new FormData(fm); //实例化对象
alert(fd);
fd对象内部有收集的form表单域信息
ajax传递表单信息
1.静态显示页面代码
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script type="text/javascript"> 6 window.onload = function(){ 7 var fm = document.getElementsByTagName(‘form‘)[0]; 8 fm.onsubmit = function(){ 9 //利用FormData实现form表单信息收集 10 var fd = new FormData(fm); 11 //fd 内部会把普通表单域 和 上传文件域 的信息都收集 12 13 //ajax传递表单信息 14 var xhr = new XMLHttpRequest(); 15 xhr.onreadystatechange = function(){ 16 if(xhr.readyState==4){ 17 alert(xhr.responseText); 18 } 19 } 20 21 //设置监听事件ajax.upload.onprogress 22 xhr.upload.onprogress = function(evt){ 23 //感知附件上传情况,利用事件对象感知 24 var loaded = evt.loaded; 25 var total = evt.total; 26 var per = Math.floor((loaded/total)*100)+"%"; 27 28 document.getElementById(‘son‘).innerHTML = per; 29 document.getElementById(‘son‘).style.width = per; 30 } 31 xhr.open(‘post‘,‘./05.php‘); 32 xhr.send(fd); 33 34 return false;//组织浏览器提交 35 } 36 } 37 </script> 38 39 <style type="text/css"> 40 #pat {width:430px;height:40px; border:5px solid blue;} 41 #son {width:0;height:100%; background-color:lightblue;} 42 </style> 43 </head> 44 <body> 45 <h2>ajax+FormData实现 无刷新文件上传</h2> 46 <form method="post" action="" > 47 <p>用户名：<input type="text" name="username" /></p> 48 <p>密码：<input type="password" name="password" /></p> 49 <p>邮箱：<input type="text" name="email" /></p> 50 <div id="pat"><div id="son"></div></div> 51 <p>头像：<input type="file" name="user_pic" /></p> 52 <p><input type="submit" value="注册" /></p> 53 </form> 54 </body> 55 </html>
2.php页面代码
服务器保存附件名字为本身名字
本地文件------>上传(php程序处理)------>服务器
本地文件名字的 字符集 gb2312
php程序的 字符集 utf-8--->gb2312 (在程序里边把utf-8编码的附件名字 转码为 gb2312)服务器的 字符集 gb2312
1 <?php 2 //$_FILES[‘user_pic‘][‘error‘] 3 //0->ok 1->大小超过php.ini限制 2->大小超过MAX_FILE_SIZE限制 4 //3->附件只上传了一部分(不完整) 4->没有上传附件 5 if($_FILES[‘user_pic‘][‘error‘]>0){ 6 exit(‘上传附件有问题，有可能没有附件‘); 7 } 8 9 //服务器保存附件名字为本身名字 10 //本地文件------>上传(php程序处理)------>服务器 11 //本地文件名字的 字符集 gb2312 12 //php程序的 字符集 utf-8--->gb2312 13 // (在程序里边把utf-8编码的附件名字 转码为 gb2312) 14 //服务器的 字符集 gb2312 15 $name = $_FILES[‘user_pic‘][‘name‘]; 16 $name = iconv(‘UTF-8‘,‘GB2312‘,$name); //$name的编码由utf-8---变为--->gb2312 17 18 $path = "./upload/"; 19 20 //附件上传逻辑 21 //move_uploaded_file(临时路径名，真实路径名); 22 if(move_uploaded_file($_FILES[‘user_pic‘][‘tmp_name‘],$path.$name)) 23 echo "success"; 24 else 25 echo "fail";
以上是关于ajax+FormData+javascript实现无刷新表单信息提交的主要内容，如果未能解决你的问题，请参考以下文章
javascript 通过jQuery Ajax使用FormData对象上传文件
使用 Javascript FormData()、AJAX $.post 和 PHP 的简单文件上传
在 iOS 上未选择文件时，JavaScript 使用 FormData 和 jQuery 的 ajax 上传文件返回错误 500
通过 Ajax 提交表单 - FormData 始终为空 [重复]