-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathindex.html
117 lines (89 loc) · 2.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upload</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
input[type=file]{
float:left;
}
</style>
</head>
<body>
<div class="container">
<h1>Uploader</h1>
<hr>
<form action="#">
<input type="file" name="image" >
<button class="btn btn-sm btn-info upload" type="submit">Upload</button>
<button type="button" class="btn btn-sm btn-danger cancel">Cancel</button>
<div class="progress progress-striped active">
<div class="progress-bar" style="width:0%"></div>
</div>
</form>
<form action="#">
<input type="file" name="image" >
<button class="btn btn-sm btn-info upload" type="submit">Upload</button>
<button type="button" class="btn btn-sm btn-danger cancel">Cancel</button>
<div class="progress progress-striped active">
<div class="progress-bar" style="width:0%"></div>
</div>
</form>
<form action="#">
<input type="file" name="image" >
<button class="btn btn-sm btn-info upload" type="submit">Upload</button>
<button type="button" class="btn btn-sm btn-danger cancel">Cancel</button>
<div class="progress progress-striped active">
<div class="progress-bar" style="width:0%"></div>
</div>
</form>
<hr>
<button class="btn btn-sm btn-primary upload-all">Upload All</button>
<button class="btn btn-sm btn-danger cancel-all">Cancel All</button>
</div><!-- end .container -->
<script>
$('.upload-all').click(function(){
//submit all form
$('form').submit();
});
$('.cancel-all').click(function(){
//submit all form
$('form .cancel').click();
});
$(document).on('submit','form',function(e){
e.preventDefault();
$form = $(this);
uploadImage($form);
});
function uploadImage($form){
$form.find('.progress-bar').removeClass('progress-bar-success')
.removeClass('progress-bar-danger');
var formdata = new FormData($form[0]); //formelement
var request = new XMLHttpRequest();
//progress event...
request.upload.addEventListener('progress',function(e){
var percent = Math.round(e.loaded/e.total * 100);
$form.find('.progress-bar').width(percent+'%').html(percent+'%');
});
//progress completed load event
request.addEventListener('load',function(e){
$form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....');
});
request.open('post', 'server.php');
request.send(formdata);
$form.on('click','.cancel',function(){
request.abort();
$form.find('.progress-bar')
.addClass('progress-bar-danger')
.removeClass('progress-bar-success')
.html('upload aborted...');
});
}
//thanks for watching........
//code on git........
//subscribe, share, like, comment.............
</script>
</body>
</html>