Yii, cant get the full path of the uploaded file

Question

In _form i have to upload some pictures and everything is working fine but what im missing is when i select my picture i want to view that picture on the page (before saving and while im inserting the data), so i was trying to get the full path of that picture in order to put it in an image src.

What i already did is showing that picture on Edit but i want to view that picture on the create form.

Here is some of my code.

<div class="row">
        <?php echo $form->labelEx($model, 'screenshot2'); ?>
        <?php
        if (!empty($model->app_name)){
            echo "<img src='/apps/$model->app_name/$model->app_name" . "_2.jpg' 
                  width=100px height=80px style='float:left' />
                  <div style='clear:both'></div>";
        }
        ?>
        <?php echo $form->fileField($model, 'screenshot2');

        //i want to put the image here
        print_r($model->image);//This shows the picture name not the path

        ?>
        <?php echo $form->error($model, 'screenshot2'); ?>
</div>

Any help with getting the path or another way to do it would be appreciated because i didnt find any.

Answer 1

I suppose that you'd like to display "preview" of the image, as soon as some file is selected at the file field.

<?php echo $form->fileField($model, 'screenshot2', array('id' => 'screenshot2')); ?>
<img id="preview" src="" />
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    (function(){
        $('#screenshot2').on('change', function(evt){
            if (0 < evt.target.files.length) {
                // get file object which is seled by user
                var _image               = evt.target.files[0];
                var _reader              = new FileReader();
                    _reader.onload       = function(evt) {
                        $('#preview').attr('src', evt.target.result);
                    };
                    _reader.readAsDataURL(_image);
            } else {
                $('#preview').attr('src', null);
            }
        });
    })();
</script>