"upload"
Bootstrap 3.2.0 Snippet by gumik

Post to Facebook Tweet this

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
</div>
<div class="container">
<div class="col-4-md">
<div class="image-uploader" data-base-height="250" data-base-width="250">
<div class="image">
<label>Click or drag a file to change your image</label>
<img />
</div>
<input id="uploader" type="file" />
<div class="zoom" style="display:none;">
<div class="plus"></div>
<div class="minus"></div>
<div class="close"></div>
</div>
</div>
</div>
<div class="col-4-md">
<div class="image-uploader" data-base-height="150" data-base-width="150">
<div class="image">
<label>Click or drag a file to change your image</label>
<img />
</div>
<input id="uploader" type="file" />
<div class="zoom" style="display:none;">
<div class="plus"></div>
<div class="minus"></div>
<div class="close"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
* {
box-sizing: border-box;
}
html, body {
font-family:'Open sans', 'sans serif';
font-size: 14px;
color: #444;
margin: 1em;
height: 100%;
}
.container {
margin-left: 100px;
}
.image-uploader {
position: relative;
}
.image-uploader:not(.filled) {
opacity: 0.7;
cursor: pointer;
background: #fff;
box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1) inset;
}
.image-uploader:not(.filled):hover {
opacity: 1;
}
.image-uploader:not(.filled):hover .image {
border: 3px dashed #bbb!important;
}
.image-uploader.filled {
cursor: move;
}
.image-uploader .image {
overflow: hidden;
border: 1px solid #aaa;
}
.image-uploader .image {
width: 150px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
// Required for drag and drop file access
jQuery.event.props.push('dataTransfer');
// IIFE to prevent globals
(function () {
var s;
var UserImage = {
settings: [],
uploaded: [],
init: function (settings) {
UserImage.settings = settings;
s = settings;
UserImage.bindUIActions();
},
bindUIActions: function () {
var timer;
for (i = 0; i < s.length; i++) {
s[i].each(function (index) {
$(this)
.data('width', $(this).data('base-width'))
.data('height', $(this).data('base-height'))
.data('zoom-factor', 0);
$(this).css({
'width': $(this).data('base-width'),
'height': $(this).data('base-height')
});
$('.image', $(this)).css({
'width': $(this).data('base-width'),
'height': $(this).data('base-height')
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2
Bootstrap Drag and Drop Upload

Questions / Comments: