Yii2: Загрузка изображений и удаление через AJAX

Рассмотрим реализацию загрузки и удаления изображений через AJAX в Yii2. Это практический пример с минимальным набором шагов для работы с файлами.

1. Подготовка базы данных

Создайте новый столбец в таблице (в примере — posts) с названием logo, тип Varchar, длина 512, с допуском нулевых значений.

2. Модель (models/Posts.php)

Добавьте публичную переменную $file для передачи загруженного изображения и правило валидации:

public $file;

// В rules():
[['file'], 'file'],

3. Представление (views/posts/_form.php)

Подключите необходимые помощники и настройте форму:

use yii\helpers\Html;
use yii\helpers\Url;

// Форма должна содержать enctype:
$form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]);

// Поле загрузки файла:
echo $form->field($model, 'file')->fileInput();

4. Контроллер

Подключите yii\web\UploadedFile. В экшенах создания и обновления обработайте файл:

use yii\web\UploadedFile;

// В actionCreate() / actionUpdate():
$model->file = UploadedFile::getInstance($model, 'file');
if ($model->file) {
    $timestamp = time();
    $fileName = $timestamp . '.' . $model->file->extension;
    $model->file->saveAs('uploads/' . $fileName);
    $model->logo = 'uploads/' . $fileName;
}
$model->save();

5. Экшен удаления изображения

Создайте отдельный экшен actionDeleteimage, который удаляет файл и обнуляет значение в модели:

public function actionDeleteimage($id)
{
    $model = Post::findOne($id);
    if ($model->logo && file_exists($model->logo)) {
        unlink($model->logo);
    }
    $model->logo = null;
    $model->save();
    return true;
}

6. AJAX удаление в представлении

Добавьте ссылку с AJAX-запросом, которая обращается к экшену удаления и скрывает элемент изображения после успешного ответа:

 $model->id]), [
    'class' => 'delete-image',
    'data-id' => $model->id,
]) ?>