-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
52 lines (49 loc) · 1.69 KB
/
example.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
<!doctype html>
<title>jquery.fileInput - Example</title>
<link rel="stylesheet" type="text/css" href="src/jquery.fileInput.css" />
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.fileInput.js"></script>
<div class="container">
<form role="form" method="POST" enctype="multipart/form-data" action="#">
<div class="row">
<div class="form-group">
<label for="images">Images (multiple)</label>
<span class="btn btn-default btn-file">
Add <input type="file" multiple="multiple" accept="image/*" id="images" class="form-control">
</span>
</div>
<div id="images_preview"></div>
</div>
<div class="row">
<div class="form-group">
<label for="video">Video (only one)</label>
<span class="btn btn-default btn-file">
Browse <input type="file" accept="video/*" id="video" name="video" class="form-control">
</span>
</div>
<div class="row" id="video_preview"></div>
</div>
<div class="row">
<div class="form-group">
<label for="audio">Audio (multiple)</label>
<span class="btn btn-default btn-file">
Add <input type="file" multiple="multiple" accept="audio/*" id="audio" class="form-control">
</span>
</div>
<div class="row" id="audio_preview"></div>
</div>
<input type="submit" value="send" />
</form>
</div>
<script type="text/javascript">
$('input#images').fileInput({
preview: $('#images_preview'),
});
$('input#video').fileInput({
preview: $('#video_preview'),
});
$('input#audio').fileInput({
preview: $('#audio_preview'),
});
</script>