Drag&Drop загрузка фото своими руками

21.05.2018
Александр Михайленко
5 минут
Разработка, Руководства,
157

Всем привет! Мы стараемся часто делиться с вами своими наработками в той или иной сфере и сегодня продолжаем эту традицию. Сейчас разберемся, как без сторонних скриптов сделать Drag&Drop загрузку фотографий на сайте (в том числе и мультизагрузку тоже).

 

Что ж, начнем с постановки самой задачи: на WordPress необходимо реализовать Drag&Drop загрузку фотографий в личном кабинете, чтобы загружать можно было бы как одну, так и несколько фото. При этом должны появляться миниатюры загруженных фото с возможностью удалить лишнюю.

 

Давайте решим эту задачу. С нашей доработкой у вас уйдет на это совсем мало времени, приступим.

 

Для начала необходимо выполнить HTML разметку блока, куда будут загружаться фото. Наш блок будет выглядеть следующим образом:

блок загрузки фото

Теперь приведем код данной разметки:

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

Теперь, когда блок готов, нужно сделать функционал на фронт части. Для этого напишем в Javascript вот такой код:

За счет чего создается эффект drag&drop загрузки?

 

Всё происходит благодаря объекту FileReader.

Объект FileReader позволяет веб-приложениям асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя, используя объекты File или Blob, с помощью которых задается файл или данные для чтения.

По факту, вы пытаетесь перетащить фото в браузер, и тот, в свою очередь, хочет их отобразить в новой вкладке, но функция срабатывает как перехватчик и читает все содержимое, а после генерирует уже превью изображений в нужном нам виде. Как видите, никаких сторонних плагинов на данном этапе подключать не нужно, все можно сделать стандартными средствами браузера.

Что же у нас получается после перетаскивания фото? Вот ответ:

результат загрузки фото

И если мы посмотрим детальнее в код, то увидим следующее:

код

У нас генерируется элемент списка li, внутри которого содержится тег input со значением изображения в виде base64 строки.

Когда фронт часть готова, необходимо позаботиться о сервере.

Серверная часть функционала

В данном участке кода всё, что необходимо вам выполнить — это обработать в цикле все изображения, которые отправит пользователь, декодировать их из формата base64, а далее использовать механизм загрузки изображений в самом WordPress. Он загрузит каждое фото в директорию и вернет вам его id, который вы потом сможете прикрепить к своей записи.

 

Итоговый вариант выглядит таким образом:

загрузка нескольких фото

Вот так можно реализовать Drag&Drop загрузку фото без сторонних скриптов. Остались вопросы? Пишите их в комментарии, разберемся!

Получить 7 писем о том,
как улучшить свой AdWords аккаунт
+ PPC статьи

Имя
e-mail
Улучшить AdWords

Улучшить свой AdWords

Получите 7 писем, о том, как можно улучшить свой аккаунт в AdWords

Подписаться

Наш сайт использует файлы cookie, чтобы улучшить работу и предоставить максимальное удобство пользователям.




В версии 2.1.1

  • Добавлена поддержка "Google Keyword Planner"
  • Используйте "LeftALT + S" для поиска слов
  • "Показать/скрыть" теперь полностью скрывает расширение с экрана

Основные комбинации

  • LeftMouseClick для добавления слова, повторное нажатие - для удаления
  • LeftALT + LeftMouseClick - для сбора фраз
  • LeftALT + S - для поиска слов