html5 自定义文件上传

原创 2016年05月30日 14:12:45
    <!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> 
版权声明:本文为博主原创文章,未经博主允许不得转载。

html5文件上传插件

  • 2017年02月10日 16:10
  • 44KB
  • 下载

HTML5利用FormData对象实现显示进度条的文件上传【译】

这篇文章是我翻译的外文,非本人原创 网上看到很多博客都有转载这篇文章 不过转载的都是英文 所以我就决定翻译一下 (翻译和格式化也耗费了一番心血 (~﹃~)~zZ) 英文能力有限,大家凑合看吧...

html5+ajax文件上传struts2接收

  • 2015年09月17日 20:29
  • 76KB
  • 下载

HTML5实现多文件上传

  • 2017年12月06日 17:52
  • 276KB
  • 下载

HTML5应用之文件上传

HTML5解决了以往网页编写的一个难题:带有上传进度的文件上传。 本文的代码全部来自http://www.matlus.com/html5-file-upload-with-progress...

php html5 文件上传

  • 2012年12月11日 17:25
  • 2KB
  • 下载

使用HTML5实现多文件上传

在Dojo1.6中有一个崭新的Multi-File Uploader  (dojox.form.Uploader),它具有一个可定制样式的file input按钮,可使用多文件选择模式,且完全基于HT...

HTML5 文件上传

  • 2016年04月21日 23:53
  • 2.39MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5 自定义文件上传
举报原因:
原因补充:

(最多只允许输入30个字)