Add path to fileField by clicking on image with YII framework

Asked

Viewed 157 times

3

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

Here is the snippet of 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 something changes for this question, but everything is in the same div.

php html jquery yii

  • Apparently you are trying to display the image without first uploading it. You will not be able to display it this way, with the image still in the client.

  • How so upload? Because uploading the image only occurs after I click on a save button. My idea was for it to appear in span as soon as it clicked. I’m sorry if I’m talking nonsense but I’m new to Yii.

1 answer

2

If you can implement javascript, you can preview 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...">

  • So, I have something like this on the page already in another feature. But my doubt is precisely in the part of adding the image, because I want to add the image that is already shown on the screen, and so when I click on it, it will be added as this example that showed me

  • It’s unclear what you’re looking for. Image preview doesn’t affect how you upload it.

  • Yes, it doesn’t. But the point is that the image I’m saying is already on the screen, it came loaded from an image bank and is fixed. But when he clicks on this image, I needed the file field (which is responsible for saving the path of a selected image), to save the path of the image clicked.

Browser other questions tagged php html jquery yii

You are not signed in. Login or sign up in order to post.