选择图像时显示预览div

Question

I have a image preview div for displaying the selected image's thumbnail. It works fine till now. But I want this div to be hidden when the page loads and visible when the users select the image to upload. heres my code constructions:

 <div class="fileinput fileinput-new" data-provides="fileinput">
 <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px; display:none"></div>  #This is the div for previewing images
 <div>
 <span class="btn btn-info btn-file">
 <span class="fileinput-new">Select image</span>
 <span class="fileinput-exists">Change</span>
 <input type="file" name=""></span>

Heres my jquery: (Its my first time with jquery)

<script type="text/javascript">
$(document).ready(function(){
    $(".btn btn-info btn-file").click(function(){
        $(".fileinput-preview thumbnail").show();
       });
});
</script>

jsFiddle http://jsfiddle.net/3717h5mg/1/

This is not working as i thought it would do.

Answer 1

try

$(document).ready(function(){
    $(".btn.btn-info.btn-file").change(function(){
         $(".fileinput-preview.thumbnail").show();
    });
});

NOTE : you missed dot(.) selector in click $(".btn btn-info btn-file"), and also thumbnail class

DEMO

Answer 2

You can show the thumbnail on file change event

$(document).ready(function(){
 $('input[type="file"]').change(function () {
     $(".fileinput-preview.thumbnail").show();
 });
});

Answer 3

Bala and anspsmn said it clearly: handle 'onchange' event. That answer your question. But, maybe an Jquery plugin could seems to you a simpler option to do what you are doing. I've developed a Jquery plugin that can be easily customized for your current needs. You can select images (or any other file type), preview them, crop them (if you want it), and easily upload them. Plus, you can set max KB for files, drag and drop files, etc., and style buttons too.

Here an example:

$('#your-input-file').customFile({
   type : 'image',
   maxKBperFile : 500,
   maxFiles : 1
});

Here you will find download link and documentation: Jquery Custom Input File