Question

我使用jasny上传图像预览插件for bootstrap 3但是当预览图像为空时这不起作用。我只需要显示no+image和select image按钮，而不是empty div和change / remove按钮。

HTML：

<div class="fileinput fileinput-exists" data-provides="fileinput" data-name="myimage">
    <input type="hidden" name="myimage" value="1" />
    <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
        <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
    </div>
    <div class="fileinput-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">

    </div>
    <div> <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
        <input type="file" />
        </span> <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>

    </div>
</div>

如何解决此问题？

DEMO：http://jsfiddle.net/Sambora/Y7hGh/2/

Answer 1

如果我正确理解了您的问题，我认为这是因为您使用的是fileupload-exists而不是fileinput-exists。所以预览容器的标记应该是这样的：

<div class="fileinput-preview fileinput-exists thumbnail" 
     style="max-width: 200px; max-height: 150px; line-height: 20px;">
</div>

Answer 2

如果没有提供预览图片，您需要更改：fileinput-exists在您的代码顶行到fileinput-new。

<div class="fileinput fileinput-exists" data-provides="fileinput" data-name="myimage">

要：

<div class="fileinput fileinput-new" data-provides="fileinput" data-name="myimage">

当现有图像为空时，jasny上传图像预览插件

2 个答案: