How to show Image view after upload and delete view image using eajaxupload extension

3 followers

Hi Friends, In this tutorial you can use the eajaxupload-extension ,

After image upload, How to see image view after uploaded like below image http://puu.sh/aeSkQ/cd078d7519.jpg

using this extension

1) copy that code on view file

but make sure your uploaded image file is correct

<div class="row">
        <?php echo $form->labelEx($model,'liquor_logo'); ?>
        <?php $this->widget('ext.EAjaxUpload.EAjaxUpload',
        array(
                'id'=>'uploadFile_new1',
                'config'=>array(
                       'action'=>Yii::app()->createUrl('vendor/liquor/upload'),
                       'allowedExtensions'=>array("jpg","jpeg","gif","png"),
                       'sizeLimit'=>10*1024*1024,// maximum file size in bytes
                       'onComplete'=>"js:function(id, fileName, responseJSON){
                                          var filename = responseJSON['filename'];
                                          var success = responseJSON['success'];
                                            if(success == true)
                                            {
                                                 jQuery('.reg_div_new .uploadClass').html(filename);
                                                 jQuery('.reg_div_new .uploadClass').removeClass('displaynone');
                                                 jQuery('.reg_div_new .deleteImage').removeClass('displaynone');
                                                 jQuery('.reg_div_new #liquor_add_logo').val(filename);
                                                 jQuery('#uploadFile_new .qq-upload-button input').attr('disabled','disabled'); 
                                                                         jQuery('#image').html('<img class=\'margin_t10\' height=\'50px\' src=" . Yii::app()->baseUrl . '/upload/liquor/' . "'+filename+'><div class=\'deleteImage active float_r\'><img onclick=\'removeLiquorImage(\"'+filename+'\");\' src=" . Yii::app()->baseUrl . "/images/delete_image.png alt=\'Remove image\'></div>')
                                            }else{
                                                 jQuery('.reg_div_new #liquor_add_logo').val('');
                                                 jQuery('.reg_div_new .uploadClass').html('');
                                                 jQuery('.reg_div_new .uploadClass').addClass('displaynone');
                                                 jQuery('.reg_div_new .deleteImage').addClass('displaynone');
                                                 jQuery('#uploadFile_new .qq-upload-button input').removeAttr('disabled','disabled'); 
                                            }
                                    }",
                       'messages'=>array(
                                         'typeError'=>"{file} has invalid extension. Only {extensions} are allowed.",
                                         'sizeError'=>"{file} is too large, maximum file size is {sizeLimit}.",
                                         'minSizeError'=>"{file} is too small, minimum file size is {minSizeLimit}.",
                                         'emptyError'=>"{file} is empty, please select files again without it.",
                                         'onLeave'=>"The files are being uploaded, if you leave now the upload will be cancelled."
                                        ),
                       'showMessage'=>"js:function(message){ alert(message); }"
                )
        )); ?>  
        <div id="image"></div>
        <?php echo $form->error($model,'liquor_logo'); ?>
        </div>
 
         <div class="reg_div_new"> 
            <?php echo $form->hiddenField($model, 'liquor_logo',array('id'=>'liquor_add_logo')); ?>
</div>

Be the first person to leave a comment

Please to leave your comment.

Write new article