21.05.2018
93

Всем привет! Мы стараемся часто делиться с вами своими наработками в той или иной сфере и сегодня продолжаем эту традицию. Сейчас разберемся, как без сторонних скриптов сделать 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

Подписаться



В версии 2.0

  • Существенно доработан интерфейс
  • Появилась возможность добавлять фразы
  • Добавлена поддержка "serpstat.com"
  • Добавлена возможность выгрузить слова через запятую
  • Добавлена возможность выгрузить фразы в кавычках
  • Появилась кнопка "Добавить" из буфера обмена, копируйте и вставляйте в расширение ранее собранные списки
  • Добавлена возможность закрепить окно расширения или скрыть его для вашего удобства
  • В analytics.google.com расширение больше не работает

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

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