wolfgang1983 wolfgang1983 - 19 days ago 8
CSS Question

Display the selected image on top of another div

When I select a image I can preview it. But it shows it above the upload-data div.

What I am trying to achieve it once select image the image preview div will show on top of the upload data div?

Question: Once select image how am I able to make the preview image display on top of the 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

Codepen: http://codepen.io/anon/pen/bBgxwK

I just simply hid the upload-data div once the user selects a file. You can the add a cancel button and unhide the div incase the user want to select another file.

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

Hope it helps, don't really know if it's what you were looking for.

EDIT

You can unhide the div using the jquery method .show().

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