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>

  • 相关阅读:
    [转] css3变形属性transform
    [转] ReactJS之JSX语法
    [转] 那些在使用webpack时踩过的坑
    [转] jQuery的deferred对象详解
    [转] Webpack-CommonsChunkPlugin
    [转] 用webpack的CommonsChunkPlugin提取公共代码的3种方式
    Refs & DOM
    [转] Webpack的devtool和source maps
    [转] 编译输出文件的区别
    GDB && QString
  • 原文地址:https://www.cnblogs.com/wangshengl9263/p/9033485.html
Copyright © 2011-2022 走看看