"Input File - Popover Preview Image "
Bootstrap 3.1.0 Snippet by iosdsv

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <!-- image-preview-filename input [CUT FROM HERE]--> <div class="input-group image-preview"> <input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET --> <span class="input-group-btn"> <!-- image-preview-clear button --> <button type="button" class="btn btn-default image-preview-clear" style="display:none;"> <span class="glyphicon glyphicon-remove"></span> Clear </button> <!-- image-preview-input --> <div class="btn btn-default image-preview-input"> <span class="glyphicon glyphicon-folder-open"></span> <span class="image-preview-input-title">Browse</span> <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> <!-- rename it --> </div> </span> </div><!-- /input-group image-preview [TO HERE]--> </div> </div> </div>
.container{ margin-top:20px; } .image-preview-input { position: relative; overflow: hidden; margin: 0px; color: #333; background-color: #fff; border-color: #ccc; } .image-preview-input input[type=file] { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .image-preview-input-title { margin-left:2px; }
$(document).on('click', '#close-preview', function(){ $('.image-preview').popover('hide'); // Hover befor close the preview $('.image-preview').hover( function () { $('.image-preview').popover('show'); }, function () { $('.image-preview').popover('hide'); } ); }); $(function() { // Create the close button var closebtn = $('<button/>', { type:"button", text: 'x', id: 'close-preview', style: 'font-size: initial;', }); closebtn.attr("class","close pull-right"); // Set the popover default content $('.image-preview').popover({ trigger:'manual', html:true, title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML, content: "There's no image", placement:'bottom' }); // Clear event $('.image-preview-clear').click(function(){ $('.image-preview').attr("data-content","").popover('hide'); $('.image-preview-filename').val(""); $('.image-preview-clear').hide(); $('.image-preview-input input:file').val(""); $(".image-preview-input-title").text("Browse"); }); // Create the preview image $(".image-preview-input input:file").change(function (){ var img = $('<img/>', { id: 'dynamic', width:250, height:200 }); var file = this.files[0]; var reader = new FileReader(); // Set preview image into the popover data-content reader.onload = function (e) { $(".image-preview-input-title").text("Change"); $(".image-preview-clear").show(); $(".image-preview-filename").val(file.name); img.attr('src', e.target.result); $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show"); } reader.readAsDataURL(file); }); });

Related: See More

Paper Bootstrap Wizard
plus minus counter input
Simple input spinner controls
Image Crop jQuery

Questions / Comments:

nice, but the popover should appear on rollover. I can't see it again once it's closed.

rt () - 10 years ago - Reply 1

It's so great that you mentioned this, i'll include it in this fragment, thank you very much.

DSV () - 10 years ago - Reply 1

the console is telling me that popover is not a fuction
can somebody help me please ?

Kevin () - 7 years ago - Reply 0

this isnt working for me

Frank Arkhurst Odoom () - 7 years ago - Reply 0

this is not working...

ab () - 7 years ago - Reply 0

i want upload multiple images and pdf documents what can i do ?

waleed arif () - 7 years ago - Reply 0

I try set static value input with image when document is ready.
I have problem with image, I don't see the image when onhover action on input.

$( document ).ready(function() {
// Create the preview image

$(".image-preview-input-title").text("Zmień");
var file = "image.jpg";
$(".image-preview-filename").val(file);
$(".image-preview-clear").show();
img.attr('src', file);
$(".image-preview").attr("data-content", $(img)[0].outerHTML).popover("show");
});

mapo () - 7 years ago - Reply 0

can anyone help me, i m not getting preview and clear button? what link do i need to include the jquery file.

Kapil Thakur () - 7 years ago - Reply 0

when the Clear button is emerged this button is not at the same line as other tags so it moved little bit down. anyone can help me on this

bandar madane () - 7 years ago - Reply 0

to good but we want to show image in page after select any image

Gautam Singh Yadav () - 8 years ago - Reply 0

nice.
how do I put the image preview above filename?

puntodamar () - 8 years ago - Reply 0

ok, I did it myself.
thanks for your awesome snippet :)

puntodamar () - 8 years ago - Reply 0

how do you do that?
thanks.

Li Zhongcheng () - 7 years ago - Reply 0

How can you ? can you help me about this?

Yolçu Nəsib () - 8 years ago - Reply 0

it's awesome previews

Anitha Malayakunnel () - 9 years ago - Reply 0

Nice one...please solve if we are using this with bootstrap forms the Browse and Clear buttons are not inline they are misplaced

Suraj Mundalik () - 9 years ago - Reply 0

If I insert this snippet twice on the same page while being in two different form when I go to upload a photo in one opens the preview also in the other, I think it is a problem of javascript . How can I fix ?

Davide Cicconi () - 9 years ago - Reply 0

how to post this image to php and what name i isset that !!!!

taha () - 9 years ago - Reply 0

it depends on what PHP framework you are using (if any, like Laravel, Slim, CodeIgniter, etc). Or are you using plain PHP?

maxsurguy () - 9 years ago - Reply 0

Didn't worke fr me ... the design is ok , comes but once i upload image nothing happens !

Alok () - 9 years ago - Reply 0

its not working at all... after choosing a file, there is no file info in the field and the popup box is not there as well.
I just copy and paste directly. What's wrong with that?

Peter () - 9 years ago - Reply 0

What browser are you using?

maxsurguy () - 9 years ago - Reply 0

its nice but its not work all browsers :( http://mirchu.net/material-...

Mirchu () - 10 years ago - Reply 0

Really like this approach!

Some dude () - 10 years ago - Reply 0

To bad that this is only for 1 image, not multiple files. I have to be honoust that this is nice :)

5300 () - 10 years ago - Reply 0

How can i publish my changes for multiply files input ?

Dalev () - 10 years ago - Reply 0

Check out http://rubaxa.github.io/jqu... for some really powerful AJAX file uploader. Also my book http://maxoffsky.com/frontend explains usage of this plugin in detail.

maxsurguy () - 10 years ago - Reply 0

Multiple files it's more complicated, this snippet is for one image at time.

DSV () - 10 years ago - Reply 0

Classy, but why no submit button ?

Webrunner () - 10 years ago - Reply 0

I wanted to keep it simple, create only one input for the user, but you're right, i need to add an example with a form and I'll add a button to send it, thank you very much for your comment.

DSV () - 10 years ago - Reply -1

Actually, please do not put the submit button because this might overload the server with file upload requests... Thanks for the great snippet!

maxsurguy () - 10 years ago - Reply 1

ok, it's not possible to add the submit button, but it's quite simple add it to your form, just read the comments inside the html, if you need some help send me an email, regards.

DSV () - 10 years ago - Reply 0