-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (125 loc) · 3.32 KB
/
index.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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="file" id="file">
<input type="button" id="upload" value="上传">
<input type="button" id="stop" value="停止">
<input type="button" id="restart" value="继续上传">
上传进度：<span id="progress"></span>
<script>
//获取节点
var fileForm = document.getElementById("file");
var uploadBtn = document.getElementById('upload');
var stopBtn = document.getElementById('stop');
var restartBtn = document.getElementById('restart');
//定义常量
const LENGTH = 1024 * 1024;//每个上传的文件块大小(1MB)
var start = 0;
var end = LENGTH + start;
var blob;
var is_stop = 0;
var blob_num = 1;
var file = null;
var upload_instance = new Upload();
//上传事件
uploadBtn.onclick = function () {
upload_instance.addFileAndSend(fileForm);
return false;
}
stopBtn.onclick = function () {
upload_instance.stop();
return false;
}
restartBtn.onclick = function () {
upload_instance.start();
return false;
}
function Upload() {
//判断浏览器类型
if (window.XMLHttpRequest){
//IE7+, Firefox, Chrome, Opera, Safari
var xhr=new XMLHttpRequest();
}else{
//IE6, IE5
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//上传文件
this.addFileAndSend = function (that) {
file = that.files[0];
blob = cutFile(file);
//上传
uploadFile(blob, file);
blob_num += 1;
}
//停止文件上传
this.stop = function () {
xhr.abort();
is_stop = 1;
}
this.start = function () {
uploadFile(blob, file);
is_stop = 0;
}
//切割文件
function cutFile(file) {
var file_blob = file.slice(start, end);
start = end;
end = start + LENGTH;
return file_blob;
};
//上传文件
function uploadFile(blob, file) {
var form_data = new FormData();
var total_blob_num = Math.ceil(file.size / LENGTH);
//上传文件信息
form_data.append('file', blob);
//上传的第几个文件块
form_data.append('blob_num', blob_num);
//总文件块数
form_data.append('total_blob_num', total_blob_num);
//文件名称
form_data.append('file_name', file.name);
//上传
xhr.open('POST', './upload.php', true);
xhr.onload = function () {
//获取上传进度
if (total_blob_num == 1) {
progressText = '100%';
} else {
progressText = (Math.min(100, (blob_num / total_blob_num) * 100)).toFixed(2) + '%';
}
var progress = document.getElementById('progress');
progress.innerHTML = progressText;
//循环执行上传，直到所有文件块上传完成
var t = setTimeout(function () {
if (start < file.size && is_stop == 0) {
blob = cutFile(file);
uploadFile(blob, file);
blob_num += 1;
} else {
//所有文件块上传完成
}
}, 1000);
if(xhr.readyState == 4 && xhr.status == 200){
temp_data = xhr.responseText;
getdata(temp_data);
}
}
xhr.send(form_data);
//每次文件块上传后，清空上传信息
function getdata(data){
console.log(data);
}
form_data = "";
}
}
</script>
</body>
</html>