php – Add path to fileField by clicking image with YII framework

Question:

I'm trying to make a scheme with fileField from YII framework so when a user clicks on the image that is on the screen, the name of the clicked image will appear in the span and the model value in the fileField will receive the image. But I'm not able to make the fileField receive this image when clicking.

Here is the snippet of the fileField code:

 <span class="form-control"></span>
   <span class="input-group-btn">
     <?php echo $form->fileField($model,'des_imagem', array('id' => 'imagemxd', 'style' => 'width: 60%', 'value' => 'text', 'onchange'=>'$(this).parent().parent().find(".form-control").html($(this).val().split(/[\\\|/]/).pop());', 'style'=>'display: none;','name'=>'produto_image','accept'=>'image/*')); ?>

Here is the code snippet from the image:

echo CHtml::image($string, '', array( 'onclick' => "$(this).parent().find('input[type=image]').click();", 'id' => 'cimagem', 'style' => 'width: 50%;' ));

NOTE: I don't know if anything changes for this question, but everything is in the same div.

Answer:

If you can implement javascript, you can preview it using FileReader , see an example:

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Prévia da imagem...">