無刷新表單提交和進度條 · 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"; } ?>