Bootstrap File Upload Fotoğraf Önizleme

Bootstrap’ta file upload/fotoğraf yükleme sırasında bilgisayardan seçilen fotoğrafı jquery ile önizleme olarak göstereceğiz. Burada yapacağımız mantık şu şekilde;

1. Sayfamız içinde boş bir img tagı oluşturuyoruz.
2. Bilgisayardan fotoğraf seçildikten sonra seçilen fotoğrafın yolunu img tagının src özelliğine atıyoruz.

Sayfamızda aşağıdaki gibi file input ve img tagımız olsun.

<div class="container">
<div class="col-md-6">
    <div class="form-group">
        <label>Upload Image</label>
        <div class="input-group">
            <span class="input-group-btn">
                <span class="btn btn-default btn-file">
                    Browse… <input type="file" id="imgInp">
                </span>
            </span>
            <input type="text" class="form-control" readonly>
        </div>
        <img id='img-upload'/>
    </div>
</div>
</div>

Fotoğraf seçildikten sonra seçilen fotoğrafı önizleme olarak gösterecek jquery kodumuz:

$(document).ready( function() {
$(document).on('change', '.btn-file :file', function() {
var input = $(this),
	label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [label]);
});

$('.btn-file :file').on('fileselect', function(event, label) {
    
    var input = $(this).parents('.input-group').find(':text'),
        log = label;
    
    if( input.length ) {
        input.val(log);
    } else {
        if( log ) alert(log);
    }

});
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        
        reader.onload = function (e) {
            $('#img-upload').attr('src', e.target.result);
        }
        
        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
}); 	
});