ajax上传进度条

Posted wangshengl9263

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

以上是关于ajax上传进度条的主要内容,如果未能解决你的问题,请参考以下文章

Ajax表单上传进度条

jquery ajax实现上传文件代码,带进度条

jquery ajax实现上传文件代码,带进度条

使用 jQuery $.ajax 和 Spring Boot 上传图片的进度条

Ajax技术——带进度条的文件上传

Ajax技术——带进度条的文件上传