html5大文件上传技术（三）

最新推荐文章于 2022-05-24 14:00:53 发布

无心2046

最新推荐文章于 2022-05-24 14:00:53 发布

阅读量328

点赞数

本文链接：https://blog.csdn.net/u012743824/article/details/78922818

版权

4、上传进度条

文件通过Ajax上传，可获得文件上传进度值，上传进度条可以通过两种方式实现。

一种是通过样式改变形状来展现，一种是通过html5的progress控件，直接赋值。

进度条改变范例：

<body>
  <input id="Text1" type="text" value="10" /><input id="Button1" type="button" οnclick="set_progress_value()" value="设置" />
    <div><progress id="my_progress"  class="progress" value="0" max="100"></progress> </div>
 <div id="box"><div id="bar"> </div></div> 
  <script>
      function set_progress_value() {
          var progress = document.getElementById("my_progress");
          var bar = document.getElementById("bar");
          progress.value = parseInt(document.getElementById("Text1").value);
          bar.style.width = parseInt(document.getElementById("Text1").value) + "px";
      };

  </script>
   <style type="text/css">
           #box {
            left: 10px;
            float: left;
            width: 200px;
            height: 10px;
            border: 1px solid grey;
            position: absolute;
            top: 60px;
            }
            #bar {
                width: 0px;
                height: 10px;
                border: 0px;
                background: #5fa187;
            }
            .progress{
            width: 200px;
            height: 10px;
            }
    </style>
</body>