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();
    });
});

注意：您在点击$（＆＃34; .btn btn-info btn-file＆＃34;）以及缩略图类

时错过了点（。）选择器

<强> DEMO

Answer 2

您可以在文件更改事件

上显示缩略图

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

Answer 3

Bala和anspsmn明确表示：处理'onchange'事件。那回答你的问题。但是，也许Jquery插件似乎是一个更简单的选择来做你正在做的事情。我开发了一个Jquery插件，可以根据您当前的需求轻松定制。您可以选择图像（或任何其他文件类型），预览它们，裁剪它们（如果需要），并轻松上传它们。另外，您可以设置文件的最大KB，拖放文件等，以及样式按钮。

这是一个例子：

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

您可以在此处找到下载链接和文档： Jquery Custom Input File

选择图像时显示预览div

3 个答案: