"Jquery Image Picker"
Bootstrap 3.3.0 Snippet by bruceborrett

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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">
<br>
<div class="col-sm-8">
<form role="form">
<legend>Add Images</legend>
<div class="row">
<div class="form-group col-sm-2">
<div class="img-picker"></div>
</div>
<div class="form-group col-sm-2">
<div class="img-picker"></div>
</div>
<div class="form-group col-sm-2">
<div class="img-picker"></div>
</div>
<div class="form-group col-sm-2">
<div class="img-picker"></div>
</div>
<div class="form-group col-sm-2">
<div class="img-picker"></div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</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
.img-upload-btn {
position: relative;
overflow: hidden;
padding-top: 95%;
}
.img-upload-btn input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
.img-upload-btn i {
position: absolute;
height: 16px;
width: 16px;
top: 50%;
left: 50%;
margin-top: -8px;
margin-left: -8px;
}
.btn-radio {
position: relative;
overflow: hidden;
}
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
(function ( $ ) {
$.fn.imagePicker = function( options ) {
// Define plugin options
var settings = $.extend({
// Input name attribute
name: "",
// Classes for styling the input
class: "form-control btn btn-default btn-block",
// Icon which displays in center of input
icon: "glyphicon glyphicon-plus"
}, options );
// Create an input inside each matched element
return this.each(function() {
$(this).html(create_btn(this, settings));
});
};
// Private function for creating the input element
function create_btn(that, settings) {
// The input icon element
var picker_btn_icon = $('<i class="'+settings.icon+'"></i>');
// The actual file input which stays hidden
var picker_btn_input = $('<input type="file" name="'+settings.name+'" />');
// The actual element displayed
var picker_btn = $('<div class="'+settings.class+' img-upload-btn"></div>')
.append(picker_btn_icon)
.append(picker_btn_input);
// File load listener
picker_btn_input.change(function() {
if ($(this).prop('files')[0]) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Is there a way to allow the image choice to come from an online list instead of from the users pc?

jlschmitz () - 6 years ago - Reply 0


It has error sending form because input is deleted when image is loaded

Angelo Di Giulio () - 8 years ago - Reply 0