zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    Response.AppendHeader使用大全
    JS获取父框架的内容:获取子框架的内容:js框架应用
    各种好用的代码生成器
    Centos 64位上搭建Android
    WinForm 多线程
    GAC及其作用
    WPF 详解模板
    WPF控件开发基础(1)
    WPF:从WPF Diagram Designer Part 1学习控件模板、移动、改变大小和旋转
    告诫
  • 原文地址:https://www.cnblogs.com/wangshengl9263/p/9033485.html
Copyright © 2011-2022 走看看