移動/傳輸預覽Div下面的Kartik文件輸入控件的按鈕

我有兩個（2）輸入文件按鈕，讓用戶上傳每個按鈕上的圖像。一旦選擇了圖像，它將在按鈕上方顯示該圖像的預覽。它看起來像這樣：移動/傳輸預覽Div下面的Kartik文件輸入控件的按鈕

正如你可以看到，當圖像有不同的尺寸，按鍵不水平對齊。現在，我想在預覽頂部傳輸按鈕，使預覽位於按鈕下方。我試過一些像這樣的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>

來源

2015-11-09 Ethelene Laverne

哦，我知道了。我只是用layoutTemplates並在main2最後一部分放在「{preview}」：

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

來源

2015-11-09 09:27:38

移動/傳輸預覽Div下面的Kartik文件輸入控件的按鈕

回答

相關問題