"Jquery Image Picker"
Bootstrap 3.3.0 Snippet by bruceborrett

<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>
.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; } .btn-radio input[type=radio] { 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; }
(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]) { // Use FileReader to get file var reader = new FileReader(); // Create a preview once image has loaded reader.onload = function(e) { var preview = create_preview(that, e.target.result, settings); $(that).html(preview); } // Load image reader.readAsDataURL(picker_btn_input.prop('files')[0]); } }); return picker_btn }; // Private function for creating a preview element function create_preview(that, src, settings) { // The preview image var picker_preview_image = $('<img src="'+src+'" class="img-responsive img-rounded" />'); // The remove image button var picker_preview_remove = $('<button class="btn btn-link"><small>Remove</small></button>'); // The preview element var picker_preview = $('<div class="text-center"></div>') .append(picker_preview_image) .append(picker_preview_remove); // Remove image listener picker_preview_remove.click(function() { var btn = create_btn(that, settings); $(that).html(btn); }); return picker_preview; }; }( jQuery )); $(document).ready(function() { $('.img-picker').imagePicker({name: 'images'}); })

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 () - 1 year ago - Reply 0


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

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