backend/components/views/image_sizer.php

<?php
/**
 * Created by PhpStorm.
 * User: vitaliy
 * Date: 05.10.15
 * Time: 16:20
 */
use yii\helpers\Html;
$this->registerJsFile('@web/js/vendor/bower/jquery-file-upload/js/vendor/jquery.ui.widget.js');
$this->registerJsFile('@web/js/vendor/bower/jquery-file-upload/js/jquery.iframe-transport.js');
$this->registerJsFile('@web/js/vendor/bower/jquery-file-upload/js/jquery.fileupload.js');
?>
<?php if(!$multi):?>
<?= $form->field( new \backend\models\ImageSizerForm(), 'file')->fileInput(['id'=>$field, 'data-url'=>"/admin/site/download-photo" ]); ?>
<?= $form->field($model,$field)->hiddenInput(['id' => "{$field}_picture_link"]) ?>
    <input type="hidden" id="<?=$field?>_old_img" name="ImageSizerForm[old_img]" value="<?=$model->$field?>"/>
    <input type="hidden" id="<?=$field?>_new_img" name="ImageSizerForm[new_img]" value=""/>
    <input type="hidden" id="<?=$field?>_row_id" name="ImageSizerForm[new_img]" value="<?=$model->id?>"/>
<div id="<?= $field?>_img_block">
    <?= $model->$field ? Html::img($model->$field): '' ?>
</div>
<script>
    $(function(){
        $("#<?= $field?>").fileupload({
            dataType: 'json',
            formData: {width: <?=$width?>,height:<?=$height?>},
            done: function (e, data) {
                if($("#<?=$field?>_buttons_block").length){
                    $("#<?=$field?>_buttons_block").remove()
                }
                var host = window.location.host.toString();
                var img = '<img src="http://'+host+data.result.link+'">'+
                    '<div id="<?=$field?>_buttons_block">'+
                        '<button type="button" id="<?=$field?>_save_img" class="btn btn-success img-action-buttons" >Сохранить</button>'+
                        '<button type="button" id="<?=$field?>_remove_img" class="btn btn-danger img-action-buttons" >Отмена</button>'+
                    '</div>';
                var block = $("#<?= $field?>_img_block");
                block.find('img').remove();
                block.append(img);
                $("#<?=$field?>_new_img").val(data.result.link);
            }
        });
        $('body').on('click', '#<?=$field?>_save_img',function(){
            $("#<?=$field?>_buttons_block").remove();
            var old_url = $('#<?=$field?>_old_img').val();
            var new_url = $('#<?=$field?>_new_img').val();
            var model = '<?=str_replace('\\', '-',$model::className());?>';
            $.post( "/admin/site/delete-image",{new_url:new_url,old_img: old_url,model:model,field:"<?= $field?>", id:"<?=$model->id?>",action:'save'},  function() {
            });
            $("#<?=$field?>_picture_link").val(new_url);
        });
        $('body').on('click', '#<?=$field?>_remove_img',function(){
            $("#<?=$field?>_buttons_block").remove();
            $("#<?=$field?>_buttons_block").remove();
            var old_url = $('#<?=$field?>_old_img').val();
            var new_url = $('#<?=$field?>_new_img').val();
            $.post( "/admin/site/delete-image",{old_img: new_url},  function() {
            });
            $('#<?= $field?>_img_block').find('img').attr('src',old_url);
        });
    })
</script>
<?php else:?>
    <?= $form->field( new \backend\models\ImageSizerForm(), 'file')->fileInput(['id'=>$field, 'data-url'=>"/admin/site/download-photo", 'multiple'=> 'multiple']); ?>
    <?= $form->field($model,$field)->hiddenInput(['id' => "{$field}_picture_link"]) ?>
    <input type="hidden" name="ImageSizerForm[width]" value="<?=$width?>"/>
    <input type="hidden" name="ImageSizerForm[height]" value="<?=$height?>"/>
    <input type="hidden" name="ImageSizerForm[multi]" value="<?=$multi?>"/>
    <div id="<?= $field?>_img_block">
        <?php
        foreach($this->context->getGallery() as  $image){
            echo $this->render('_gallery_item', [ 'item' => ['image'=>$image]]);
        }
        ?>
    </div>
    <script>
        $(function(){
            $("#<?= $field?>").fileupload({
                dataType: 'json',
                done: function (e, data) {
                    var img = data.result.view;
                    var block = $("#<?= $field?>_img_block");
                    block.append(img);
                    var gallery = $("#<?= $field?>_picture_link");
                    gallery.val(gallery.val()+data.result.link+',');
                }
            });
            $('body').on('click','.delete-gallery-item', function(){
                var url = $(this).data('url');
                $(this).parent('.gallery_image').remove();
                var gallery = $("#<?= $field?>_picture_link");
                var urls = gallery.val();
                gallery.val(urls.replace(url+',', ""));
                $.post( "/admin/site/delete-image",{old_img: url},  function( data ) {
                    $( ".result" ).html( data );
                });
            })
        })
    </script>
<?php endif;?>