html5新特性:异步上传文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>html5文件上传</title> </head> <body> <input type="file" name="file" id="file" /> <br/> <input type="submit" value="提交" id="submit" /> <script> var fileinput=document.getElementById('file'); var btn=document.getElementById('submit'); btn.onclick=function(){ var file=fileinput.files[0]; var formdata=new FormData(); formdata.append('file',file); var xhr=new XMLHttpRequest(); xhr.open("POST",'upload.php',true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhr.upload.addEventListener("progress",function(e){ document.title= e.loaded/ e.total; },false) xhr.addEventListener("load", function(e){ alert(e.target.responseText); }, false); xhr.onreadystatechange=function(){ console.log(xhr.readyState) } xhr.send(formdata) } </script> </body> </html>