javascript - 选择图像时显示预览 div

Question

我有一个图像预览 div 用于显示所选图像的缩略图。到目前为止它工作正常。但我希望这个 div 在页面加载时隐藏，并在用户选择要上传的图像时可见。这是我的代码结构:

 <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>

这是我的 jquery:(这是我第一次使用 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/

这并没有像我想象的那样工作。

Answer 1

尝试

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

注意:您在点击 $(".btn btn-info btn-file") 时错过了点 (.) 选择器，还有缩略图类

DEMO