html5 自定义文件上传

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Sensation_cyq/article/details/51537556
    <!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> 
阅读更多
博主设置当前文章不允许评论。

博主推荐

换一批

没有更多推荐了,返回首页