7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Yii

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

Scroll to top
Read Time: 8 mins

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

Final product imageFinal product imageFinal 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 ExamplesYii2 Image Uploads - Kartik File Input Widget Demo ExamplesYii2 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 ExamplesYii2 Image Uploads - 2Amigos and BlueImp File Upload ExamplesYii2 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 CapabilityYii2 Image Uploads - Creating a Status with Our New File Input CapabilityYii2 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 AddedYii2 Image Uploads - Create Status Page with File Upload AddedYii2 Image Uploads - Create Status Page with File Upload Added

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

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

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

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

Yii2 Image Uploads - Enhanced Status View with Image BelowYii2 Image Uploads - Enhanced Status View with Image BelowYii2 Image Uploads - Enhanced Status View with Image Below

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

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

Yii2 Image Uploads - Enhanced Status Index with Uploaded Image ThumbnailsYii2 Image Uploads - Enhanced Status Index with Uploaded Image ThumbnailsYii2 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 DropYii2 Image Uploads - Enhanced File Input Widget Options with Drag and DropYii2 Image Uploads - Enhanced File Input Widget Options with Drag and Drop

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

Что дальше?

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

Yii2 File Uploader Meeting Planner User Profile Image UploadYii2 File Uploader Meeting Planner User Profile Image UploadYii2 File Uploader Meeting Planner User Profile Image Upload

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

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

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

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.