Отображение выбранного изображения поверх другого div

Question

Когда я выбираю изображение, я могу его просмотреть. Но он показывает это выше div-файла upload-data.

Что я пытаюсь достичь, как только выберете изображение, изображение, которое будет отображаться в окне div, отобразится поверх выгрузки данных div?

Вопрос: После выбора изображения, как я могу сделать предварительный просмотр изображения поверх 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

Co depen: http://codepen.io/anon/pen/bBgxwK

Я просто просто спрятал upload-data div после того, как пользователь выберет файл. Вы можете добавить кнопку отмены и отобразить div, чтобы пользователь захотел выбрать другой файл.

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

Надеюсь, что это поможет, не знаю, действительно ли это то, что вы искали.

EDIT

Вы можете отобразить в DIV с помощью метода JQuery .show().

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