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

我有两（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>

×
名片模板设计.jpg
0%
取消
附上名片1
哦，我知道了。我刚刚使用了
layoutTemplates
并在
main2
的最后一部分中放置了“
{preview}
”：

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

“layoutTemplates”=>[
'main2'=>'{remove}{cancel}{upload}{browse}{preview}'，
]

详情如下：