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>

  • 相关阅读:
    jQuery遍历之siblings()
    命名空间
    AnsiString
    《linux内核完全注释》读书笔记 2
    mciSendString
    PeekMessage, GetMessage, PostMessage, SendMessage
    c/c++中运行外部程序或打开文件(转)
    定义基类和派生类
    复制构造函数
    让StringGrid控件显示下拉菜单
  • 原文地址:https://www.cnblogs.com/wangshengl9263/p/9033485.html
Copyright © 2011-2022 走看看