javascript - 在 Kartik 文件输入小部件的按钮下方移动/传输预览 Div

Question

我有两 (2) 个输入文件按钮，让用户可以在每个按钮上上传图像。选择图像后，它将在按钮上方显示该图像的预览。它看起来像这样:

如您所见，当图像尺寸不同时，按钮不会水平对齐。现在，我想将按钮转移到预览之上，使预览位于按钮下方。我已经尝试了一些 jQuery，例如:

$('.file-preview').insertAfter('.btn .btn-primary .btn-block .btn-file');
$('.file-preview').detach().insertAfter('.btn .btn-primary .btn-block .btn-file');

但是它们不起作用。如果您有更好的想法，请评论或回答。谢谢。

编辑:这是小部件的代码:

<div class="col-sm-6"><input type="hidden" name="Contact[attachment_1]" value="">
    <span class="file-input">
        <div class="file-preview">
            <div class="close fileinput-remove">×</div>
            <div class="">
                <div class="file-preview-thumbnails">
                    <div class="file-preview-frame" id="preview-1447035353917-0" data-fileindex="0">
                        <img src="blob:http%3A//localhost/0bc1d4fc-c8f8-4b7c-a963-0d3090193832" class="file-preview-image" title="Business-card-template-design.jpg" alt="Business-card-template-design.jpg" style="width:auto;height:160px;">
                        <div class="file-thumbnail-footer">
                            <div class="file-caption-name" title="Business-card-template-design.jpg" style="width: 238px;">Business-card-template-design.jpg</div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>   
                <div class="file-preview-status text-center text-success"></div>
                <div class="kv-fileinput-error file-error-message" style="display: none;"></div>
            </div>
        </div>
        <div class="kv-upload-progress hide">
            <div class="progress">
                <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                    0%
                </div>
            </div>
        </div>

        <button type="button" title="Abort ongoing upload" class="hide btn btn-default fileinput-cancel fileinput-cancel-button"><i class="glyphicon glyphicon-ban-circle"></i> Cancel</button>

        <div class="btn btn-primary btn-block btn-file"> <i class="glyphicon glyphicon-camera"></i> Attach Business Card 1 <input type="file" id="contact-attachment_1" class="" name="Contact[attachment_1]" accept="image/*" data-krajee-fileinput="fileinput_a052254a"></div>
    </span>
<!--[if lt IE 10]><br><div class="alert alert-warning"><strong>Note:</strong> Your browser does not support file preview and multiple file upload. Try an alternative or more recent browser to access these features.</div><script>jQuery("#contact-attachment_1").removeClass('file-loading');</script><![endif]-->
</div>

Answer 1

哦，我明白了。我刚刚使用了 layoutTemplates 并在 main2 的最后一部分放置了“{preview}”:

'layoutTemplates' => [
   'main2' => '<div class="kv-upload-progress hide"></div>{remove}{cancel}{upload}{browse}{preview}',
]

此处有更多详细信息:http://plugins.krajee.com/file-input#option-layouttemplates