码迷,mamicode.com
首页 > Web开发 > 详细

ajax上传进度条

时间:2018-05-13 22:04:26      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:read   inpu   res   html   ESS   style   pos   head   ext   

<script type="text/javascript">
  function register(){
    var frm = document.getElementById(‘frm‘);
    var fd = new FormData(frm);
    var request = new XmlHttpRequest();
    request.open(‘post‘, ‘./demo.php‘);
    request.onreadystatechange = function(){
      if (request.readystate == 4 && request.status == 200) {
          if(request.responseText == ‘1‘){
            alert(‘上传成功!‘);
          }
      }
      request.send(fd);
      //上传进度条
      request.upload.onprogress = function(e){
        var total = e.total;//总大小
        var loaded = e.loaded; //已上传的大小
        var percent = Math.floor(loaded/total*100);
        document.getElementById(‘in‘).style.width = percent+‘%‘;
        document.getElementById(‘in‘).innerHTML = percent+‘%‘;

      }
    }
  }
</script>
</head>
<body>
<form id="frm">
  用户名:<input type="text" name="username"><br>
  头像:<input type="file" name="face"><br>
  <div id="out">
    <div id="in"></div>
  </div>
  <input type="button" value="上传" id="btn">
</form>
</body>

ajax上传进度条

标签:read   inpu   res   html   ESS   style   pos   head   ext   

原文地址:https://www.cnblogs.com/wangshengl9263/p/9033485.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!