ajax上传进度条

<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>

猜你喜欢

转载自www.cnblogs.com/wangshengl9263/p/9033485.html