Как сделать загрузку фото с превью?

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
Brainfuck
Сообщения: 313
Зарегистрирован: 2018.02.19, 14:20

Как сделать загрузку фото с превью?

Сообщение Brainfuck »

Использую Kartik File Input вот так:

Код: Выделить всё

echo $form->field($model, 'photo_path')->widget(FileInput::class, [
    'pluginOptions' => [
        'initialPreview' => $model->photo_path,
        'initialPreviewAsData' => true,
        'overriteInitial' => false,
        'showCaption' => false,
        'showRemove' => false,
        'showUpload' => false,
        'browseClass' => 'btn btn-primary btn-block',
        'browseIcon' => '<i class="fa fa-camera"></i> ',
        'browseLabel' =>  'Выберите фото'
    ],
    'options' => ['accept' => 'image/*'],
]);
И все бы хорошо, но есть несколько проблем:

1. Этот виджет поддерживает превью загружаемой фотки. То есть когда ты выбрал в инпуте фото, но еще не засабмитил, а оно уже отображается в браузере. Эта фишка работает с загруженным ранее фото, но когда по новой я выбираю у меня нету превью... Почему так? :( (я имею ввиду создание новой модели)

2. С первичной загрузкой все работает хорошо, не считая отсутствия превью. Но вот когда я например хочу засабмитить эту форму с сохраненными ранее данными (например я поменял какое-то другое поле), то получаю ошибку что "файл не выбран". Так оно и есть, но ведь разве не для того там это превью отображается или я чего то не понимаю?

Изображение

Кстати кнопка удаления фото тоже не работает.
yiiliveext
Сообщения: 910
Зарегистрирован: 2019.08.13, 01:49

Re: Как сделать загрузку фото с превью?

Сообщение yiiliveext »

Там неплохая документация по виджету. И даже на стековерфлоу все разжевано давно. Как говорил мне когда-то мой учитель в далеких 80-ых, читай исходники, в них сила, Люк)
P.S. Спасибо, кстати, за предыдущий пример с валидатором, то ли я завтыкал, то ли такого функционала раньше не было, но это отличное решение, хоть и не напрямую с полем таблицы лучше использовать)
Brainfuck
Сообщения: 313
Зарегистрирован: 2018.02.19, 14:20

Re: Как сделать загрузку фото с превью?

Сообщение Brainfuck »

Пожалуйста помогите =( Проблема все еще актуальна!
Аватара пользователя
Vi_ru_S
Сообщения: 61
Зарегистрирован: 2018.08.14, 07:39
Откуда: Владивосток
Контактная информация:

Re: Как сделать загрузку фото с превью?

Сообщение Vi_ru_S »

Если не ошибаюсь все плюшки виджета работают через Event ну и соответственно когда вы пытаетесь удалить у вас не чиго не выходит так как нет действий на эту кнопку. А по поводу виджета загрузки картинок поищите в интренете готовое решение так будет легче.
В действительности все иначе чем на самом деле. Антуан де Сент Экзюпери
Brainfuck
Сообщения: 313
Зарегистрирован: 2018.02.19, 14:20

Re: Как сделать загрузку фото с превью?

Сообщение Brainfuck »

Vi_ru_S писал(а): 2019.10.21, 16:54А по поводу виджета загрузки картинок поищите в интренете готовое решение так будет легче.
Это и есть готовое решение (=_=)
Vadim7423
Сообщения: 59
Зарегистрирован: 2016.07.07, 20:21

Re: Как сделать загрузку фото с превью?

Сообщение Vadim7423 »

Я bupy7/yii2-widget-cropbox для таких целей использую. Все работает из коробки без костылей
Brainfuck
Сообщения: 313
Зарегистрирован: 2018.02.19, 14:20

Re: Как сделать загрузку фото с превью?

Сообщение Brainfuck »

Vadim7423 писал(а): 2019.10.30, 11:09 Я bupy7/yii2-widget-cropbox для таких целей использую. Все работает из коробки без костылей
Но мне не нужна обрезка... Мне просто нужна загрузка изображений с превью!!!
Vadim7423
Сообщения: 59
Зарегистрирован: 2016.07.07, 20:21

Re: Как сделать загрузку фото с превью?

Сообщение Vadim7423 »

Brainfuck писал(а): 2019.10.30, 11:39
Vadim7423 писал(а): 2019.10.30, 11:09 Я bupy7/yii2-widget-cropbox для таких целей использую. Все работает из коробки без костылей
Но мне не нужна обрезка... Мне просто нужна загрузка изображений с превью!!!
Понятно. Просто php скрипт в инете найдите и прикрутите. Типа такого

Код: Выделить всё

 public function resizeImg($target, $dest, $wmax, $hmax, $ext){
	    /*
	    $target - путь к оригинальному файлу
	    $dest - путь сохранения обработанного файла
	    $wmax - максимальная ширина
	    $hmax - максимальная высота
	    $ext - расширение файла
	    */
	    list($w_orig, $h_orig) = getimagesize($target);
	    $ratio = $w_orig / $h_orig; // =1 - квадрат, <1 - альбомная, >1 - книжная

	    if(($wmax / $hmax) > $ratio){
	        $wmax = $hmax * $ratio;
	    }else{
	        $hmax = $wmax / $ratio;
	    }
	    
	    $img = "";
	    // imagecreatefromjpeg | imagecreatefromgif | imagecreatefrompng
	    switch($ext){
	        case("gif"):
	            $img = imagecreatefromgif($target);
	            break;
	        case("png"):
	            $img = imagecreatefrompng($target);
	            break;
	        default:
	            $img = imagecreatefromjpeg($target);    
	    }
	    $newImg = imagecreatetruecolor($wmax, $hmax); // создаем оболочку для новой картинки
	    
	    if($ext == "png"){
	        imagesavealpha($newImg, true); // сохранение альфа канала
	        $transPng = imagecolorallocatealpha($newImg,0,0,0,127); // добавляем прозрачность
	        imagefill($newImg, 0, 0, $transPng); // заливка  
	    }
	    
	    imagecopyresampled($newImg, $img, 0, 0, 0, 0, $wmax, $hmax, $w_orig, $h_orig); // копируем и ресайзим изображение
	    switch($ext){
	        case("gif"):
	            imagegif($newImg, $dest);
	            break;
	        case("png"):
	            imagepng($newImg, $dest);
	            break;
	        default:
	            imagejpeg($newImg, $dest);    
	    }
	    imagedestroy($newImg);
	}
Brainfuck
Сообщения: 313
Зарегистрирован: 2018.02.19, 14:20

Re: Как сделать загрузку фото с превью?

Сообщение Brainfuck »

Vadim7423 писал(а): 2019.10.30, 12:36
Brainfuck писал(а): 2019.10.30, 11:39
Vadim7423 писал(а): 2019.10.30, 11:09 Я bupy7/yii2-widget-cropbox для таких целей использую. Все работает из коробки без костылей
Но мне не нужна обрезка... Мне просто нужна загрузка изображений с превью!!!
Понятно. Просто php скрипт в инете найдите и прикрутите. Типа такого

Код: Выделить всё

 public function resizeImg($target, $dest, $wmax, $hmax, $ext){
	    /*
	    $target - путь к оригинальному файлу
	    $dest - путь сохранения обработанного файла
	    $wmax - максимальная ширина
	    $hmax - максимальная высота
	    $ext - расширение файла
	    */
	    list($w_orig, $h_orig) = getimagesize($target);
	    $ratio = $w_orig / $h_orig; // =1 - квадрат, <1 - альбомная, >1 - книжная

	    if(($wmax / $hmax) > $ratio){
	        $wmax = $hmax * $ratio;
	    }else{
	        $hmax = $wmax / $ratio;
	    }
	    
	    $img = "";
	    // imagecreatefromjpeg | imagecreatefromgif | imagecreatefrompng
	    switch($ext){
	        case("gif"):
	            $img = imagecreatefromgif($target);
	            break;
	        case("png"):
	            $img = imagecreatefrompng($target);
	            break;
	        default:
	            $img = imagecreatefromjpeg($target);    
	    }
	    $newImg = imagecreatetruecolor($wmax, $hmax); // создаем оболочку для новой картинки
	    
	    if($ext == "png"){
	        imagesavealpha($newImg, true); // сохранение альфа канала
	        $transPng = imagecolorallocatealpha($newImg,0,0,0,127); // добавляем прозрачность
	        imagefill($newImg, 0, 0, $transPng); // заливка  
	    }
	    
	    imagecopyresampled($newImg, $img, 0, 0, 0, 0, $wmax, $hmax, $w_orig, $h_orig); // копируем и ресайзим изображение
	    switch($ext){
	        case("gif"):
	            imagegif($newImg, $dest);
	            break;
	        case("png"):
	            imagepng($newImg, $dest);
	            break;
	        default:
	            imagejpeg($newImg, $dest);    
	    }
	    imagedestroy($newImg);
	}
Че это за бред? Я русским языком сказал что мне не нужен ресайз, зачем вы мне его опять тыкаете?
Vadim7423
Сообщения: 59
Зарегистрирован: 2016.07.07, 20:21

Re: Как сделать загрузку фото с превью?

Сообщение Vadim7423 »

Превью создается через ресайз изображения, разве нет? Если нужно чтобы изображение тупо появлялось при загрузке тут же в форме, то вам скорее на форум javascript
Brainfuck
Сообщения: 313
Зарегистрирован: 2018.02.19, 14:20

Re: Как сделать загрузку фото с превью?

Сообщение Brainfuck »

Vadim7423 писал(а): 2019.10.30, 13:17 Превью создается через ресайз изображения, разве нет? Если нужно чтобы изображение тупо появлялось при загрузке тут же в форме, то вам скорее на форум javascript
Нет. Второе
pClerick
Сообщения: 5
Зарегистрирован: 2018.03.21, 11:54

Re: Как сделать загрузку фото с превью?

Сообщение pClerick »

Brainfuck писал(а): 2019.10.30, 11:39 Но мне не нужна обрезка... Мне просто нужна загрузка изображений с превью!!!
Думаю Вы имели ввиду нечто такого типа:
https://blueimp.github.io/jQuery-File-Upload/
Для него есть Yii-шный виджет:
https://github.com/yii2-starter-kit/yii ... /README.md

Это часть довольной интересной сборки Yii2-starter-kit
Посмотреть можно тут:
http://backend.yii2-starter-kit.terentev.net/
вход:
webmaster
webmaster
Если зайти в личный профиль - там как раз пример удачного загрузчика изображений
Ответить