关闭

html5 自定义文件上传

标签: html5 自定义文件上传
64人阅读 评论(0) 收藏 举报
分类:
    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
      <meta charset="UTF-8">  
      <title>文件上传</title>  
    </head>  
    <body>  
    <!--自定义html组件,触发文件上传对话窗口的打开-->  
    <div id="yourBtn" style="height: 300px; width: 500px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">  
      Click to upload!  
    </div>  
    <!--将文件选择的input隐藏-->  
    <div style="display: none">  
      <input id="upfile" type="file" value="upload"/>  
    </div>  
    </body>  
      
    <script>  
      //触发 文件上传组件的 click 事件 , 打开文件上传的对话窗口  
      document.getElementById("yourBtn").onclick = function () {  
        document.getElementById("upfile").click();  
      };  
      //文件上传  
      document.getElementById("upfile").onchange = function () {  
        var url = '';  
        var xhr = new XMLHttpRequest();  
        // html5 的 form api  
        var fd = new FormData();  
        //异步 post 方式请求  
        xhr.open('POST', url, true);  
      
        //状态监听  
        xhr.onreadystatechange = function () {  
          if (xhr.readyState == 4 && xhr.status == 200) {  
            alert('文件上传成功!');  
          }  
        };  
      
        //添加参数  
        fd.append('file', this.files[0]);  
        xhr.send(fd);  
      };  
    </script>  
    </html> 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:25911次
    • 积分:745
    • 等级:
    • 排名:千里之外
    • 原创:47篇
    • 转载:26篇
    • 译文:0篇
    • 评论:0条