在另一個div上顯示選定的圖像

Question

當我選擇圖像時，我可以預覽它。但它顯示在upload-data div上方。

我試圖實現它一旦選擇圖像圖像預覽div將顯示在上傳數據div頂部？

問題：一旦選擇了圖像，我如何才能使預覽圖像顯示在upload-data div之上？

Codepen DEMO

HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-6 col-lg-offset-3"> 
     <div class="well"> 
     <div class="upload-info"> 

      <div class="upload-image"></div><!-- Preview Div--> 

      <div class="upload-data"> 
      <i class="fa fa-cloud-upload" aria-hidden="true"></i> 
      <input type="file" class="file-input" /> 
      <p>Click any where to select file!</p> 
      </div><!-- Upload image data--> 

     </div><!-- Upload info--> 

     </div> 
    </div> 
    </div> 
</div> 

CSS

.container { 
    margin-top: 20px; 
} 

.well { 
    text-align: center; 
    overflow: hidden; 
    position: relative; 
    cursor: pointer; 
} 

.well .file-input { 
    cursor: pointer; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 99; 
    /*This makes the button huge. If you want a bigger button, increase the font size*/ 
    font-size: 50px; 
    /*Opacity settings for all browsers*/ 
    opacity: 0; 
    -moz-opacity: 0; 
    filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0) 
} 

.well i { 
    font-size: 15rem; 
    text-shadow: 10px 10px 10px #646464; 
} 

.well img { 
    width: 100%; 
    height: 280px; 
} 

jQuery的

function readURL(input) { 

    if (input.files && input.files[0]) { 
    var reader = new FileReader(); 

    reader.onload = function(e) { 
     $('.upload-image img').attr('src', e.target.result); 
    } 
    reader.readAsDataURL(input.files[0]); 
    } 
} 

$(".file-input").change(function(){ 
    $('.upload-image').append('<img>'); 
    readURL(this); 
}); 

Answer 1

有限公司依賴新生：http://codepen.io/anon/pen/bBgxwK

我只是單純地躲到upload-data DIV一旦用戶選擇了一個文件。你可以添加一個取消按鈕並取消隱藏用戶想要選擇另一個文件的分割。

$(".file-input").change(function(){ 
    $('.upload-image').append('<img>'); 
    $('.upload-data').hide(); //Hide the div. 
    readURL(this); 
}); 

希望它有幫助，真的不知道它是否是你要找的。

編輯

可以取消隱藏使用jQuery方法.show()股利。

$('.upload-data').show();