Add path to fileField when clicking image with YII framework


I'm trying to make a fileField schema of the YII framework for when a user clicks on the image that is on the screen, the name of the image clicked will appear in the span and the value of the model in the fileField will receive the image. But I'm not able to get fileField to 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 snippet of the image code:

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

NOTE: I do not know if something changes for this question, but everything is in the same div.

asked by anonymous 16.05.2018 / 15:12

1 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) {
  } else {
    preview.src = "";
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Prévia da imagem...">
16.05.2018 / 15:24