-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
92 lines (62 loc) · 1.82 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jquery.js"></script>
<style>
img{
width: 40px;
}
</style>
</head>
<body>
<div class="container">
<h1>Image Uploader</h1>
<input type="file" name="images[]" id="images" multiple>
<hr>
<div id="images-to-upload">
</div><!-- end #images-to-upload -->
<hr>
<a href="#" class="btn btn-sm btn-success">Upload all images</a>
</div><!-- end .container -->
<script>
//indirect ajax
//file collection array
var fileCollection = new Array();
$('#images').on('change',function(e){
var files = e.target.files;
$.each(files, function(i, file){
fileCollection.push(file);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var template = '<form action="/upload">'+
'<img src="'+e.target.result+'"> '+
'<label>Image Title</label> <input type="text" name="title">'+
' <button class="btn btn-sm btn-info upload">Upload</button>'+
' <a href="#" class="btn btn-sm btn-danger remove">Remove</a>'+
'</form>';
$('#images-to-upload').append(template);
};
});
});
//form upload ... delegation
$(document).on('submit','form',function(e){
e.preventDefault();
//this form index
var index = $(this).index();
var formdata = new FormData($(this)[0]); //direct form not object
//append the file relation to index
formdata.append('image',fileCollection[index]);
var request = new XMLHttpRequest();
request.open('post', 'server.php', true);
request.send(formdata);
});
//more development in coming time........
//subscribe, share, like, comment................
//thanks for watching.................................
</script>
</body>
</html>