Как включить функцию перетаскивания файлов для загрузки в WordPress

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

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

Почему перетаскивание имеет значение

Более быстрая загрузка

• Отсутствует возможность навигации по диалоговым окнам выбора файлов.
• Выбрать и перетащить одним движением
• Мгновенная загрузка нескольких файлов

Лучший пользовательский опыт

• Интуитивно понятный интерфейс — пользователи понимают принцип перетаскивания.
• Выглядит современно и изысканно.
• Снижает трение при заполнении формы.

Более высокие показатели завершения

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

Мобильная Животных

• На мобильных устройствах происходит корректный возврат к стандартному средству выбора файлов.
• Сенсорные устройства получают встроенную функцию выбора файлов.
• Отсутствует сбой в работе.

Как работает перетаскивание (Drag and Drop)

Пользовательский опыт

1. Пользователь видит область для перетаскивания на вашей форме.
2. Они перетаскивают файлы со своего рабочего стола/папки.
3. Зона перетаскивания подсвечивается при наведении курсора на файл.
4. Файлы перетаскиваются, и начинается загрузка.
5. Предварительный просмотр/подтверждение показывает успешную загрузку.

Обратная связь

Удобная функция перетаскивания предоставляет визуальные подсказки:

• Состояние по умолчанию: Освободите зону сброса с инструкциями.
• Перетащите курсор: Зональное выделение, изменение цвета границы.
• Бросьте: Файлы отображаются в области предварительного просмотра.
• Загрузка: Индикатор прогресса
• Полное: Подтверждение успеха

Проектирование зоны приземления

Типичные элементы зоны падения:

┌──────────────────────────────────────┐ │ │ │ 📁 Перетащите файлы сюда или │ │ нажмите, чтобы выбрать файл │ │ │ │ Принимаются файлы: PDF, JPG, PNG │ │ Максимальный размер: 10 МБ │ │ │ └───────────────────────────────────┘

Настройка загрузки файлов методом перетаскивания.

Вот как включить функцию перетаскивания. Автоматический конструктор форм:

Шаг 1: Установите Auto Form Builder

1. Перейдите на Плагины → Добавить новый
2. Искать "AFB(сокращенное название Auto Form Builder)
3. Найти "AFB – Auto Form Builder – конструктор форм с функцией перетаскивания.
4. Нажмите установить сейчас, то активировать

Шаг 2: Добавьте поле для загрузки файла.

1. Создайте или отредактируйте свою форму
2. Перетащите Загрузка файла добавьте это поле в вашу форму
3. Нажмите, чтобы открыть настройки поля.

Шаг 3: Функция перетаскивания уже встроена.

Хорошие новости: В поле для загрузки файлов в Auto Form Builder по умолчанию предусмотрена функция перетаскивания. Специальная настройка не требуется.

Зона загрузки автоматически:

• Принимает перетаскиваемые файлы
• Основные моменты в дрэг-рейсинге
• Отображает предварительный просмотр файлов после перетаскивания.
• На мобильных устройствах возвращается к режиму просмотра по клику.

Шаг 4: Настройка поля загрузки

Настройте параметры поля для загрузки:

Разрешенные типы файлов

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

Максимальный размер файла

• Установите ограничение на размер каждого файла.
• Предотвращает загрузку файлов слишком большого размера.

Несколько файлов

• Включите возможность перетаскивания нескольких файлов.
• Установите минимальные/максимальные пределы.

Пользовательские метки

• Метка поля: «Загрузить документы»
• Текст справки: «Перетащите файлы сюда или нажмите, чтобы выбрать файл».

Шаг 5: Оформление зоны размещения (необязательно)

Используйте стили форм для настройки внешнего вида:

• Стиль и цвет рамки
• Фоновый цвет
• Иконка или иллюстрация
• Состояние парения/активное состояние

Рекомендации по организации зоны приземления

1. Сделайте это видимым

Зона сброса должна быть очевидна:

• Чёткая рамка (традиционная рамка — пунктирная)
• Достаточный размер (не крошечный)
• Значок, указывающий на загрузку файла (папка, облако, стрелка)

2. Включите четкие инструкции.

Укажите пользователям, что им нужно делать:

• «Перетащите файлы сюда»
• «или нажмите, чтобы просмотреть»
• Показать принимаемые типы файлов

3. Обеспечьте визуальную обратную связь

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

• Изменение цвета при наведении курсора
• Подсветка границы при перетаскивании
• Сообщение «Разрешить загрузку»

4. Отображение хода загрузки

Для файлов большего размера:

• Индикатор выполнения во время загрузки
• Процент выполнения
• Имя загружаемого файла

5. Подтверждение успеха

После завершения загрузки:

• Показать имя файла/миниатюру
• Галочка или индикатор успеха
• Возможность удалить и попробовать снова.

6. Грамотно обрабатывайте ошибки

Когда что-то идёт не так:

• Удалить сообщение об ошибке («Файл слишком большой»)
• Выделите проблемный файл.
• Разрешить повторную попытку

Перетаскивание против просмотра по щелчку мыши

Лучший подход: Поддерживаются оба варианта. Для опытных пользователей — перетаскивание, для всех остальных — выбор по щелчку мыши.

Типичные схемы зон сброса

Схема 1: Полная зона сброса

Большая, хорошо заметная зона, предназначенная для перетаскивания файлов:

┌─────────────────────────────────────────┐ │ │ │ │ ☁️ Загрузка файлов │ │ │ │ Перетащите файлы сюда или │ │ нажмите, чтобы выбрать файл │ │ │ │ PDF, DOC, JPG, PNG (максимум 10 МБ) │ │ │ └──────────────────────────────────────┘

Лучше всего подходит для: Формы, где основным действием является загрузка файла.

Схема 2: Компактная зона сброса

Меньшая зона рядом с другими полями:

Вложения ┌──────────────────────────┐ │ 📎 Перетащите файлы или выберите нужный │ └───────────────────────────┘

Лучше всего подходит для: Загрузка файла — одно из многих полей формы.

Вариант 3: Встроенный в пуговицу

Зона сброса в сочетании с традиционной кнопкой:

┌───────────────────────────────────────┐ │ Перетащите файлы сюда [Выберите файлы] │ └───────────────────────────────────┘

Лучше всего подходит для: Гибридный подход, четкий резервный вариант.

Шаблон 4: Зона предварительного просмотра изображения

Зона для перетаскивания с предварительным просмотром миниатюр:

┌──────────────────────────────────────┐ │ [img1] [img2] [img3] [+] │ │ │ │ Добавьте сюда еще изображения │ └───────────────────────────────────┘

Лучше всего подходит для: Фотогалереи, загрузка фотографий.

Мобильные соображения

Сенсорные устройства не перетаскивают

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

• Нажмите на область перетаскивания, чтобы открыть средство выбора файлов.
• Выбор исходных фотографий/файлов
• Функция камеры для создания новых фотографий.

Метки, адаптированные для мобильных устройств

Настройте сообщения для мобильных устройств:

• Рабочий стол: «Перетащите файлы сюда или щелкните, чтобы просмотреть»
• Мобильная версия: «Нажмите, чтобы выбрать файлы» (или просто отобразить оба варианта).

Тест на реальных устройствах

Перед запуском:

• Протестировано на iPhone и Android.
• Проверьте, работает ли выбор файла.
• Проверьте доступ к камере, если это применимо.
• Убедитесь, что загрузка завершилась успешно.

Улучшение зоны приземления

Анимация при перетаскивании

Ненавязчивая анимация улучшает пользовательский опыт:

• Пограничный пульсирующий или светящийся
• Плавный переход цвета фона
• Отскок или масштабирование значка

Действуйте ненавязчиво — не отвлекайте внимание от действия.

Значки типов файлов

Отобразить соответствующие значки:

• 📄 для документов
• 🖼️ для изображений
• 📊 для электронных таблиц
• 🎥 для видео

Ход загрузки

Для более качественной обратной связи во время загрузки:

• Индикатор выполнения для каждого файла
• Общий прогресс по нескольким файлам.
• Отмена загрузки длинных файлов.

Предварительный просмотр миниатюр

Для загрузки изображений:

• Показать миниатюру после перетаскивания
• Нажмите, чтобы посмотреть в полном размере
• Кнопка X для удаления

Устранение неполадок при перетаскивании объектов

Файлы не будут потеряны

Проверьте:

• В браузере включен JavaScript.
• Отсутствие ошибок JavaScript, блокирующих функциональность.
• Допустимый тип файла
• Браузер поддерживает перетаскивание (современные браузеры поддерживают эту функцию).

Зона приземления не выделена

Возможные причины:

• CSS загружается некорректно.
• Ошибка JavaScript
• Конфликт плагинов

Файлы загружены, но не отображаются.

Проверьте:

• Функция предварительного просмотра включена.
• Поддерживаемые типы файлов для предварительного просмотра
• Загрузка фактически завершена.

Мобильный резервный вариант не работает.

Убедитесь, что:

• Обработчик кликов/касаний активен.
• Существует скрытый ввод файла.
• Разрешения мобильного браузера для доступа к файлам

Медленные загрузки

Причины:

• Большие размеры файлов
• Медленное подключение к интернету
• Ограничения сервера

Решения:

• Добавить индикаторы выполнения
• Установите разумные ограничения на размер файлов.
• Рассмотрите возможность загрузки очень больших файлов по частям.

Поддержка браузера

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

Если вам необходимо поддерживать очень старые браузеры, убедитесь, что работает резервный вариант "просмотр по клику".

Вопросы доступности

Поддержка клавиатуры

Не все пользуются мышью:

• Зона сброса должна быть фокусируемой (табиндекс).
• Нажатие клавиши Enter/Space должно открывать диалоговое окно выбора файла.
• Состояния фокуса должны быть видны.

Программы чтения с экрана

• Четкие подписи для области загрузки
• Объявить о ходе загрузки
• Подтвердите успешную загрузку.

Не полагайтесь только на сопротивление воздуха.

Всегда предоставляйте альтернативный вариант, активируемый щелчком мыши. Перетаскивание — это дополнительная функция, а не единственный вариант.

Варианты использования функции перетаскивания

Подача документов

Пользователи перетаскивают контракты, отчеты или приложения непосредственно из своих папок.

Галереи изображений

Для участия в конкурсах или для отправки портфолио необходимо перетащить несколько фотографий одновременно.

Поддержка

Перетащите скриншоты или журналы ошибок непосредственно в форму заявки.

Работа приложений

Соберите резюме, сопроводительное письмо и портфолио одним действием.

Клиентские порталы

Клиенты перетаскивают файлы проекта, ресурсы или документы с отзывами.

Часто задаваемые вопросы (FAQ)

Функция перетаскивания работает во всех браузерах?

Да, все современные браузеры поддерживают это. Очень старым браузерам (IE10 и более ранним) может потребоваться резервный вариант по клику.

Что происходит на мобильных устройствах?

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

Пользователи по-прежнему могут переходить по ссылкам для просмотра?

Да, щелчок по области перетаскивания открывает диалоговое окно выбора файла. Оба способа работают.

Работает ли это с несколькими файлами?

Безусловно. Пользователи могут перетаскивать несколько файлов одновременно, если ваше поле позволяет загружать несколько файлов одновременно.

Требуется ли специальная настройка?

В Auto Form Builder функция перетаскивания файлов встроена в поле для загрузки файлов. Никакой специальной настройки не требуется.

Резюме

Включение функции перетаскивания файлов для загрузки:

1. Добавить поле для загрузки файла – Функция перетаскивания встроена.
2. Настройка параметров файла – Типы, размеры, ограничения
3. Обеспечьте свободную зону сброса – Видно, с инструкциями
4. Предоставьте визуальную обратную связь. – Подсветка при перетаскивании, отображение прогресса
5. Поддержка резервного варианта при нажатии – Не все занимаются дрэг-рейсингом
6. Тест на мобильном телефоне – Проверьте, работает ли функция просмотра одним касанием.
7. Учитывайте доступность – Поддержка клавиатуры и программ чтения с экрана.

Заключение

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

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

Готовы к современной загрузке файлов? Скачать Auto Form Builder и предоставьте своим пользователям ожидаемый ими опыт перетаскивания.