Предварительный просмотр изображения перед сохранением в базе данных в Yii с помощью Jquery

Question

Я не понять, как я должен вести для предварительного просмотра изображения перед его сохраняются в базе данных в Yii с помощью JQuery или любой метод, который вы можете предложить

вид

<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'); ?> 

JQuery код

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]); 
    } 
    } 

Фатальная ошибка Функция предварительного вызова().

Как я должен интегрировать эту функцию в Jquery выше форме ....... $ форма имеет htmlOptions

ПОЖАЛУЙСТА ПОМОГИТЕ! Я новичок в Yii и теряю рассудок. Спасибо.

Answer 1

Это ниже код показывает предварительный просмотр изображения с помощью 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 
      { 

      } 
     } 

И ваш HTML должен быть

 <input type="file" name="image" onchange="uploadImage(this)" data-target="#aImgShow" /> 
     <img id="aImgShow" src="" class="carImage" />