-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.php
79 lines (71 loc) · 3.01 KB
/
index.php
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
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<form action="upload.php" method="POST" enctype="multipart/form-data" id="upload_form">
<input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="upload_progress"/>
<input type="file" name="file1"/>
<input type="submit"/>
</form>
<div id="progress-bar-container" style="border: thin solid gray;">
<div id="progress-bar"
style="height: 30px; width: 0%; background: cornflowerblue; color: white; text-align: right; line-height: 30px;">
</div>
</div>
<script>
$(document).ready(function () {
$("#upload_form").on('submit', function (event) {
event.preventDefault();
// lets do ajax...
let formData = new FormData();
let file = $('input[type=file]')[0].files[0];
let other_data = $("#upload_form").serializeArray();
$.each(other_data, function (key, input) {
formData.append(input.name, input.value);
});
formData.append('uploaded_file', file);
$.ajax({
type: 'POST',
url: 'upload.php',
data: formData,
processData: false,
contentType: false,
success: function (msg) {
console.log(msg);
},
error: function (err) {
console.log(err);
}
});
// now query for upload progress...
uploadProgress();
});
});
function uploadProgress() {
let timer = setInterval(function () {
$.ajax({
type: 'POST',
url: 'progress.php',
success: function (msg) {
if (msg === 'null') {
clearInterval(timer);
document.getElementById('progress-bar').style.width = "100%";
document.getElementById('progress-bar').innerHTML = "100%";
} else {
let progress = JSON.parse(msg);
let processed_bytes = progress['bytes_processed'];
let total_bytes = progress['content_length'];
// lets do math now
let total_percent = Math.floor(processed_bytes * 100 / total_bytes);
document.getElementById('progress-bar').style.width = total_percent + "%";
document.getElementById('progress-bar').innerHTML = total_percent + "%";
if (total_percent >= 100) {
document.getElementById('progress-bar').style.width = "100%";
document.getElementById('progress-bar').innerHTML = "100%";
}
}
}
});
}, 500);
}
</script>