Yii : Image preview before upload

File input control in form:

<div class="row">
            <img id="preview" width="200px" class="hidden"/>
            <?php echo CHtml::label("File Foto", 'file_image'); ?>
            <?php echo CHtml::fileField("file_image", '', array('accept' => '.jpg')); ?>
           
            <br/>
            <?php
            echo CHtml::button("Upload Foto", array(
                'id' => 'btn-upload'
            ));
            ?>
</div>

Javascript onchange event:

Yii::app()->clientScript->registerScript('preview', "
    $('#file_image').change(function(){
    var file_name=$('#file_image').val();
    var extension=file_name.split('.').pop();
    if(extension=='jpg'||extension=='JPG'||extension=='jpeg'||extension=='JPEG'){
        $('#div-message').addClass('hidden');
        readURL(this);
    }else{
        $('#div-message').removeClass('hidden');
        $('#div-message').html('Not valid extension');
        $('#file_image').val('');
    }
        
    });
");

Javascript readURL function:

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#preview').attr('src', e.target.result);
                $("#preview").removeClass("hidden");
            }

            reader.readAsDataURL(input.files[0]);
        }
    }