I successfully customized the file input utilizing jQuery and CSS3.
However, there is one aspect I couldn't quite figure out. After the user selects an image or file, I want to display the selected file's text at the very bottom of the text like this:
https://i.stack.imgur.com/7RLgv.png
Here are my current codes. This is the HTML:
<div class="container-avatar">
<div class="avatar-upload">
<div class="avatar-edit">
<input accept=".png, .jpg, .jpeg" id="imageUpload" type='file'> <label for="imageUpload"></label>
</div>
<div class="avatar-preview">
<div id="imagePreview" style="background-image: url('http://softorius.ro/images/about1.jpg');"></div>
</div>
</div>
This is the CSS:
.container-avatar {
max-width: 115px;
margin: 0px auto;
}
.avatar-upload {
position: relative;
max-width: 200px;
margin: 10px auto;
}
.avatar-upload .avatar-edit {
position: absolute;
right: 12px;
z-index: 1;
top: 10px;
}
.avatar-upload .avatar-edit input {
display: none;
}
...
And here is the jQuery snippet:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').css('background-image', 'url('+e.target.result +')');
$('#imagePreview').hide();
$('#imagePreview').fadeIn(650);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imageUpload").change(function() {
readURL(this);
});
You can also view all the code on JSFIDDLE: https://jsfiddle.net/wtvrzj91/1/