Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Yii
Code

Как программировать с Yii2: Загрузка файлов

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

Final product image
What You'll Be Creating

Если вы спрашиваете «Что такое Yii?», ознакомьтесь с моим предыдущим учебным руководством: Введение в Yii Framework, в котором рассматриваются преимущества Yii и которое включает обзор новинок в Yii 2.0, выпущенного в октябре 2014 года.

В этом разделе Программирование с Yii2 я ориентирую читателей на использование Yii2 Framework для PHP. В этом уроке я расскажу вам об основах загрузки файлов и изображений в Yii2.

В этих примерах мы продолжим считать, что мы создаем интерфейс для публикации обновлений статуса, например, наш собственный мини-Twitter. На изображении выше показано обновление при загрузке изображения, которое я взял в Taj Mahal.

Просто напоминание, я участвую в комментариях ниже. Меня особенно интересует, если у вас разные подходы, дополнительные идеи или вы хотите предложить темы для будущих учебников. Если у вас есть вопрос или предложение темы, пожалуйста, напишите ниже. Вы также можете связаться со мной в Twitter @reifman напрямую.

Плагины загрузки файлов

Yii2 Image Uploads - Kartik File Input Widget Demo Examples

Для Yii2 есть два плагина для загрузки файлов, которые кажутся наиболее надежными:

  1. FileInput Widget от Kartik Visweswaran (показано выше)
  2. 2Amigos BlueImp File Uploader (обертка для BlueImp JQuery File Uploader)

Для этого урока я решил использовать плагин Kartik. По моему мнению он проще в использовании и лучше документирован, чем плагин 2Amigos. Тем не менее, BlueImp File Uploader имеет некоторые интригующие функции пользовательского интерфейса, которые вы можете изучить (показано ниже):

Yii2 Image Uploads - 2Amigos and BlueImp File Upload Examples

Работа с плагином FileInput

Давайте начнем устанавливать и использовать загрузчик файлов и интегрировать его в наш Twitter-подобный апплет создания статуса. Опять же, мы будем использовать дерево приложения Yii2 Hello, которое вы можете загрузить с помощью ссылки кнопки GitHub рядом или ниже.

Установка плагина

Во-первых, мы можем использовать composer для добавления kartik-v/yii2-widget-fileinput в наше приложение:

Расширение таблицы Status

Затем нам нужно добавить поля для файла, который мы собираемся загрузить в нашу таблицу Status. В этом примере мы дадим пользователю загрузить изображение, чтобы оно соответствовало обновлению статуса.

Поля, которые мы добавим, относятся к исходному имени загруженного файла, а также к уникальному имени файла, которое будет храниться на нашем сервере для отображения:

  • image_src_filename
  • image_web_filename

Создайте новую миграцию для добавления этих полей в таблицу Status:

Вот настраиваемая миграция для добавления двух полей в виде строк:

Затем выполните миграцию:

Поскольку Yii2 построен на архитектуре Model View Controller (MVC), существуют три другие области кодирования, которые нам необходимо реализовать для загрузчика файлов:

  1. Модель Status
  2. Представление Status и форма
  3. Контроллер Status

Улучшение функциональности модели

Теперь мы внесем изменения в файл /models/Status.php. Прежде всего, нам нужно предоставить атрибуты и правила проверки для новых полей изображения, а также временную переменную $image, которую виджет будет использовать для загрузки файла.

Ниже мы добавляем комментарии для двух новых переменных $image_xxx_filename и создаем общедоступную временную переменную с именем $image:

Затем мы добавим правила проверки для нашего изображения, такие как тип файла и максимальный размер:

И новые названия атрибутов для представлений:

Теперь мы можем перейти к изменениям в представлении в форме ActiveModel.

Добавление нашего представления и функциональности формы

Интеграция загрузки изображений в форму создания статуса

Yii2 Image Uploads - Creating a Status with Our New File Input Capability

Чтобы включить интеграцию с загрузкой изображений в обновления статусов (см. выше), нам необходимо внести изменения в файл /views/status/_form.php.

Во-первых, мы включаем виджет kartik\file\FileInput в начале файла и обновляем форму, разрешая мульти-загрузку файлов:

Затем между полем Разрешения и кнопкой Отправить мы добавим виджет FileInput:

В строке pluginOptions мы ограничиваем типы файлов обычными форматами изображений, такими как jpg.

По завершении он будет выглядеть примерно так, ожидая, пока пользователь добавит изображение:

Yii2 Image Uploads - Create Status Page with File Upload Added

Отображение изображения

Я также собираюсь позже добавить код для отображения загруженного изображения (после того, как мы закончим поддержку контроллера).

Во-первых, я добавлю его на страницу просмотра статуса (/views/status/view.php), что очень просто. Однако, я выведу изображение ниже деталей:

Он будет выглядеть примерно так:

Yii2 Image Uploads - Enhanced Status View with Image Below

Мы также добавим просмотр миниатюр на нашу страницу статуса (/views/status/index.php). Я добавил дополнительный столбец в виджет Yii2 GridView:

В конечном итоге это будет выглядеть так:

Yii2 Image Uploads - Enhanced Status Index with Uploaded Image Thumbnails

Создание поддержки контроллера

Чтобы сделать все возможное, нам нужно завершить интеграцию с контроллером.

В верхней части /controllers/StatusController.php мы должны включить yii\web\UploadedFile:

Затем мы должны обновить функцию actionCreate:

По существу, этот код выполняет следующие операции:

  1. Мы фиксируем исходное имя файла из данных формы - имя загруженного файла (image_src_filename).
  2. Мы генерируем уникальное имя файла для нашего сервера (image_web_filename).
  3. Мы сохраняем файл в нашем каталоге загрузки (/web/uploads/status/).
  4. Мы сохраняем модель.
  5. Мы делаем перенаправление на страницу расширенного просмотра.

На картинке выше вы можете увидеть окончательный результат, который включает в себя изображение Тадж-Махала.

Kartik's File Input Widget также предлагает более продвинутые конфигурации, которые он достаточно хорошо документирует, например Drag and Drop:

Yii2 Image Uploads - Enhanced File Input Widget Options with Drag and Drop

Ознакомьтесь с ними на следующих страницах:

Что дальше?

Надеюсь, это поможет вам в основах загрузки файлов в приложении Yii2. Если вы хотите увидеть другое подобное описание этого функционала, ознакомьтесь с Построение стартапа с PHP: Настройки пользователя, Изображения профиля и Контактная информация. Тот урок предлагает немного другую интеграцию, чем это руководство, используя вкладки, обновляя профили пользователей и масштабируя изображения.

Yii2 File Uploader Meeting Planner User Profile Image Upload

Следите за предстоящими уроками в моем курсе Программирование с Yii2, так как я продолжаю погружаться в разные аспекты структуры. Вы также можете ознакомиться с моим курсом Построение стартапа с помощью PHP, в которой используется расширенный шаблон Yii2, когда я создаю реальное приложение.

Если вы хотите узнать, когда выйдет следующий урок по Yii2, следуйте за мной @reifman в Twitter или проверьте мою страницу инструктора. Моя страница инструктора будет включать все статьи из этой серии, как только они будут опубликованы.

Ссылки по теме

Вот несколько ссылок, которые я использовал для исследования и написания этого руководства:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.