无刷新表单提交和进度条 · phpAndMysql

ajax对象有成员upload，该upload成员是一个对象，本身有onprogress事件该事件每间隔100ms左右就执行一次，执行的时候可以感知附件已经上传和总大小等信息，使得“已经上传大小”和“总大小”做对比可以获得上传附件的百分比，进而就可以设置进度条。 ![Image](https://box.kancloud.cn/648ac7585fa0ad6a3067efa3ba1c384d_485x253.png) 利用新技术FormData表单数据对象，可以实现快速收集表单信息。 FormData是[HTML5](http://lib.csdn.net/base/html5 "HTML5知识库")的新技术，在主流浏览器都可以正常使用。可以利用FormData实现附件信息的收集:普通表单域和上传文件域均可以收集 FormData使用注意事项: 1,无需使用setRequestHeader()方法 2\.要求每个表单域里面必须有name属性 3\.表单域内内部有特殊符号($=&)无需编码 4\.在form标签里边无需设置enctype=”multipart/form-data”属性(即使有上传文件域也不需要设置) <script type="text/javascript"> //javascript+ajax无刷新方式form表单提交 window.onload = function(){ var fm = document.getElementsByTagName('form')\[0\]; //表单提交事件 fm.onsubmit = function(evt){ //① 收集用户输入的表单域信息\[FormData\] var fd = new FormData(fm);//普通表单域 + 上传文件域信息 //② 并把收集的信息提交给服务器端\[ajax\] var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ alert(xhr.responseText); } } xhr.upload.onprogress = function(evt){ //该事件每间隔100ms左右就执行一次， //并可以通过事件对象感知附件信息 //附件已经上传大小 var lod = evt.loaded; //附件总大小 var tal = evt.total; //上传百分比 var per = Math.floor((lod/tal)\*100) + "%"; //给son的div设置宽度百分比 document.getElementById('son').innerHTML= per; document.getElementById('son').style.width = per; } xhr.open('post','./06.php'); xhr.send(fd); //阻止浏览器form表单的提交动作 evt.preventDefault(); } } </script> <style type="text/css"> \#pat {width:460px; height:40px;border:4px solid blue;} \#son {width:0; height:100%; background-color:lightblue;} </style> </head> <body> <h2>用户注册(无刷新方式附件上传)</h2> <form method="post" action="./1001.php"> <p>用户名：<input type="text" id="mingzi" name="username" /></p> <p>密码：<input type="password" id="mima" name="userpwd" /></p> <p>邮箱：<input type="text" id="youxiang" name="useremail" /></p> <div id="pat"><div id="son"></div></div> <p>头像：<input type="file" id="touxiang" name="userpic" /></p> <p><input type="submit" value="注册" /></p> </form> </body> <?php if($\_FILES\['userpic'\]\['error'\]>0){ echo "false"; }else { echo "true"; } ?>