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

Question

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

0

Я не понимаю, как я должен продолжить предварительный просмотр изображения до его сохранения в базе данных в 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 в приведенной выше форме... $ form имеет htmlOptions

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

Tested 18 дек. 2013, в 18:08

Источник

Теги:

jquery

jquery-ui

yii

1 ответ

Ещё вопросы

Hearaman · Answer 1 · 2013-12-18T15-53-00.000Z

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

я использую yii не html, поэтому выше HTML-код не работает для yii ........ и я готов ...... но тогда спасибо :)
@tisha, для твоей задачи нужно решение в скриптах на стороне клиента. Скрипты на стороне сервера здесь не помогут.