Question

我不明白我应该如何继续预览图像使用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的新手，我对此感到失望。谢谢。

Answer 1

此波纹管代码显示使用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" />

使用Jquery将图像保存到Yii中的数据库之前预览图像

1 个答案: