本文实例讲述了php大文件切割上传并带进度条功能。分享给大家供大家参考,具体如下:
前面一篇介绍了php大文件切割上传功能,这里再来进一步讲解php大文件切割上传并带进度条功能。
项目结构图:
14-slice-upload-fix.html文件:
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<!doctype html>
<html>
<head>
<meta charset= "utf-8" >
<meta http-equiv= "x-ua-compatible" content= "ie=edge" >
<title>大文件切割上传带进度条</title>
<link rel= "stylesheet" href= "" >
<script>
var xhr = new xmlhttprequest(); //xhr对象
var clock = null;
function selfile(){
clock = window.setinterval(sendfile,1000);
}
var sendfile = ( function (){
const length = 1024 * 1024 * 10; //每次上传的大小
var start = 0; //每次上传的开始字节
var end = start + length; //每次上传的结尾字节
var sending = false; //表示是否正在上传
var fd = null; //创建表单数据对象
var blob = null; //二进制对象
var percent = 0;
return ( function (){
//如果有块正在上传,则不进行上传
if (sending == true){
return ;
}
var file = document.getelementsbyname( 'video' )[0].files[0]; //文件对象
//如果sta>file.size,就结束了
if (start > file.size){
clearinterval(clock);
return ;
}
blob = file.slice(start, end ); //根据长度截取每次需要上传的数据
fd = new formdata(); //每一次需要重新创建
fd.append( 'video' ,blob); //添加数据到fd对象中
up(fd);
//重新设置开始和结尾
start = end ;
end = start + length;
sending = false; //上传完了
//显示进度条
percent = 100 * start/file.size;
if (percent>100){
percent = 100;
}
document.getelementbyid( 'bar' ).style.width = percent + '%' ;
document.getelementbyid( 'bar' ).innerhtml = parseint(percent)+ '%' ;
});
})();
function up(fd){
xhr.open( 'post' , '13-slice-upload.php' ,false);
xhr.send(fd);
}
</script>
<style>
#progress{
width:500px;
height:30px;
border:1px solid green;
}
#bar{
width:0%;
height:100%;
background-color: green;
}
</style>
</head>
<body>
<h1>大文件切割上传带进度条</h1>
<div id= "progress" >
<div id= "bar" ></div>
</div>
<input type= "file" name= "video" onchange= "selfile();" />
</body>
</html>
|
13-slice-upload.php文件:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?php
/**
* 大文件切割上传,把每次上传的数据合并成一个文件
* @author webbc
*/
$filename = './upload/upload.wmv' ; //确定上传的文件名
//第一次上传时没有文件,就创建文件,此后上传只需要把数据追加到此文件中
if (! file_exists ( $filename )){
move_uploaded_file( $_files [ 'video' ][ 'tmp_name' ], $filename );
} else {
file_put_contents ( $filename , file_get_contents ( $_files [ 'video' ][ 'tmp_name' ]),file_append);
}
?>
|
运行结果图:
希望本文所述对大家PHP程序设计有所帮助。
原文链接:https://blog.csdn.net/baochao95/article/details/52815001