Preview an image before it is saved to database in Yii using Jquery - jquery-ui

Question

I am not understanding how should I carry on to Preview an image before it is
being saved to database in yii using jquery or any method that you can suggest
view
<img id="preview_image"
src="images/<?php echo $model->pimg; ?>"
width="150px" height="120px"/>
<?php echo $form->labelEx($model,'pimg'); ?>
<?php echo $form->fileField($model, 'pimg',array('change'=>preview(this));); ?>
<?php echo $form->error($model,'pimg'); ?>
the jquery code
function preview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview_image')
.attr('src', e.target.result)
.width(100)
.height(120);
};
reader.readAsDataURL(input.files[0]);
}
}
Fatal error to function call preview().
How should I integrate this Jquery function in above form ....... $form has the htmlOptions
PLEASE HELP! I am new to Yii and am loosing my mind on this. Thank you.

Answer 1

This bellow code shows the image preview using jQuery
var imageTypes = ['jpeg', 'jpg', 'png']; //Validate the images to show
function showImage(src, target)
{
var fr = new FileReader();
fr.onload = function(e)
{
target.src = this.result;
};
fr.readAsDataURL(src.files[0]);
}
var uploadImage = function(obj)
{
var val = obj.value;
var lastInd = val.lastIndexOf('.');
var ext = val.slice(lastInd + 1, val.length);
if (imageTypes.indexOf(ext) !== -1)
{
var id = $(obj).data('target');
var src = obj;
var target = $(id)[0];
showImage(src, target);
}
else
{
}
}
And your HTML should be
<input type="file" name="image" onchange="uploadImage(this)" data-target="#aImgShow" />
<img id="aImgShow" src="" class="carImage" />