type file custom preview
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<h3>Suba su recibo de pago</h3>
<div id="preview" class="thumbnail">
<a href="#" id="file-select" class="btn btn-default">Elegir archivo</a>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4="/>
</div>
<span class="alert alert-info" id="file-info">No hay archivo aún</span>
<form id="file-submit" enctype="multipart/form-data">
<input id="file" name="file" type="file"/>
</form>
<a href="#" class="btn btn-primary" id="file-save">Guardar</a>
CSS
body {
width: 300px;
margin: 10px auto;
text-align:center;
}
.thumbnail {
// width: 171px;
margin: 0 auto;
margin-bottom: 10px;
}
#preview {
position: relative;
}
#preview a {
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
display: none;
}
#file-info {
text-align: center;
display: block;
}
input[type=file] {
position: absolute;
visibility: hidden;
width: 0;
z-index: -9999;
}
#file-save {
text-align:center;
width: 171px;
}
JavaScript
$('#preview').hover(
function() {
$(this).find('a').fadeIn();
}, function() {
$(this).find('a').fadeOut();
}
)
$('#file-select').on('click', function(e) {
e.preventDefault();
$('#file').click();
})
$('input[type=file]').change(function() {
var file = (this.files[0].name).toString();
var reader = new FileReader();
$('#file-info').text('');
$('#file-info').text(file);
reader.onload = function (e) {
$('#preview img').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});