【ITOO-视频系统】——进度条_视频进度条完成代码怎么弄

引言

  最开始设计进度条的原因很简单。当时做视频系统的时候，我做上传页面，直接从上传优酷视频的网页上扒下来的代码，当时觉得进度条是必不可少的，但是没想到给自己挖了个坑，但是还跳的挺开心~~~

最开始的进度条

  最开始的进度的样式很好看，因为是从bootstrap源码里粘过来的，但是当时的进度条是写死的，所以没有什么技术含量在里边，而且也没有动态效果。
  代码：

<div class="form-group">
    <label for="exampleInputEmail1">视频上传进度</label>
     <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="60" 
          aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
          <span class="sr-only">40% 完成</span>
     </div>
</div>
1
2
3
4
5
6
7
8

  页面效果：

现在的进度条

  因为bootstrap的进度条的限制，所以在研究之后，决定使用easyui的进度条，利用XMLHttPRequest设置对文件上传的监听控制进度条的速度。
  代码如下：

var xhr;  
    function createXMLHttpRequest() {  
        try {  
            xhr = new ActiveXObject("Msxml2.XMLHTTP");//IE高版本创建XMLHTTP  
        }  
        catch(E) {  
            try {  
                xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE低版本创建XMLHTTP  
            }  
            catch(E) {  
                xhr = new XMLHttpRequest();//兼容非IE浏览器，直接创建XMLHTTP对象  
            }  
        }  

    }
    function uploadfile(obj){   
        //进度条设置
        var file=document.getElementById("file1").files[0];
        var fileName=file.name;
        var fileSize=(Math.round(file.size * 100 /1024) / 100).toString() + "KB";
        $("#videoname").val(fileName);

        //利用FormData发送二进制文件
        var fd=new FormData();
        fd.append("file",file);

        createXMLHttpRequest();                                //创建XMLHttpRequest对象  
        xhr.open("post",'<%=basePath%>'+"/upload/upload", true);  
        xhr.upload.addEventListener("progress",uploadProgress,false);
        xhr.onreadystatechange = processResponse; //指定响应函数  
        xhr.send(fd); 

    }
//回调函数  
function processResponse() {  
    if (xhr.readyState == 4) {  
        if (xhr.status == 200) {  
            var text = xhr.responseText;
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

  进度条效果如下：

  如果想了解这个进度条的可以私信我哈~~~

总结

  从最开始的对进度条的设想，到最后功能的完成，真心觉得没有什么是你做不到的，只有你不敢想的~~~下一步，实现视频的拖拽功能！！！