html5新特性:异步上传文件

最新推荐文章于 2024-03-05 10:06:12 发布

前端老码农

最新推荐文章于 2024-03-05 10:06:12 发布

阅读量130

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=jakkkhiab&title=html5%E6%96%B0%E7%89%B9%E6%80%A7%3A%E5%BC%82%E6%AD%A5%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

                        
   <!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.οnclick=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>