• HTML
• CSS
• JS

HTML

<div class="container">
    <form class="row justify-content-md-center">
    	<div class="col-6 offset-3">
    		<div class="form-group">
    			<div class="text-center">
    			    <label for="avatar">
    			        <img class="img-thumbnail" id="preview-avatar" src="http://2.gravatar.com/avatar/671a000122a0b4f448e71f69b8ba4e22?s=192&d=wavatar" alt="JossMP">
    		        </label>
    		    </div>
    			<div class="custom-file">
    				<input type="file" class="custom-file-input" id="avatar" name="avatar" data-target="preview-avatar" accept="image/png, image/jpeg">
    				<label class="custom-file-label" for="avatar">default.png</label>
    			</div>
    		</div>
    	</div>
    </form>
</div>

CSS

.custom-file {
    position: relative;
    display: inline-block;
    width: 100%;
    height: calc(2.25rem + 2px);
    margin-bottom: 0;
}
.custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(2.25rem + 2px);
    margin: 0;
    opacity: 0;
}
.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}
.custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(calc(2.25rem + 2px) - 1px * 2);
    padding: .375rem .75rem;
    line-height: 1.5;
    color: #495057;
    content: "Examinar";
    background-color: #e9ecef;
    border-left: 1px solid #ced4da;
    border-radius: 0 .25rem .25rem 0;
}
.img-thumbnail
{
    width: 100%;
}

JS

// FileInput
$(function(){
	$(document).on('change', ':file', function()
	{
		var input = $(this), numFiles = input.get(0).files ? input.get(0).files.length : 1;
        var label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
		// Vista Previa
		target = input.data("target");
		if( target )
		{
			var reader = new FileReader();
			reader.onload = function(file)
			{
				var fileContent = file.target.result;
				$("#" + target).attr("src", fileContent);
			}
			reader.readAsDataURL(this.files[0]);
		}

		input.trigger('fileselect', [numFiles, label]);
		
		var input2 = $(this).siblings('.custom-file-label');
		var log = numFiles > 1 ? numFiles + ' archivos seleccionados' : label;
		if( input2.length )
		{
			input2.text(log);
		}
		else
		{
			if( log ) console.log( log );
		}
	});
});