選択した画像を他のdivの上に表示

Question

画像を選択するとプレビューできます。しかし、それはアップロードデータの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

共同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は

あなたはjqueryのメソッド.show()を使用してdiv要素を再表示することができます。

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