Image Preview on Input File!

by. Tetangga-sebelah.com

HTML

<input type='file' data-img="gambar_1" class="input_img" accept=".png, .jpg, .jpeg"/>
<img id="gambar_1" src=""/>
<input type='file' data-img="gambar_2" class="input_img" accept=".png, .jpg, .jpeg"/>
<img id="gambar_2" src=""/>
<input type='file' data-img="gambar_3" class="input_img" accept=".png, .jpg, .jpeg"/>
<img id="gambar_3" src=""/>

CSS

#gambar {display:block;max-width:500px}

JavaScript

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