Как загружать один или несколько файлов простым способом с помощью FormData

Автор оригинала: Ahmed Bouchefra.

В этом посте мы узнаем о интерфейсе FormData, доступной в Современные веб-браузеры как часть спецификации HTML5.

Мы увидим примеры использования FormData с Ajax, угловым 7, ионным и реагирующим.

Что такое форматата

Formdata – это просто структура данных, которая может использоваться для хранения пар клавишных элементов. Как и его имя предлагает, он предназначен для хранения данных форм I.E Вы можете использовать его с JavaScript для создания объекта, который соответствует формате HTML. Это в основном полезно, когда вам необходимо отправить данные формы для retful API конечных точек API, например, для загрузки одиночных или нескольких файлов, используя XMLHTTPREQUEST Интерфейс, fetch () API или Axios.

Вы можете создать объект FormData путем создания интерфейса FormData с использованием Новый Оператор следующим образом:

const formData = new FormData()

formdata Ссылка относится к экземпляру FormData. Вы можете назвать множество методов на объекте добавить и работать с парами данных. Каждая пара имеет ключ и значение.

Это доступные методы на объектах FormData:

• Добавить () : Используется для добавления пары клавиш для объекта. Если ключ уже существует, значение прилагается к исходному значению для этого ключа,
• Удалить () : Используется для удаления пары ключа,
• Записи () : Возвращает объект iTerator, который вы можете использовать для цикла через список пар ключевых пар в объекте,
• Получить () : Используется для возврата значения для ключа. Если несколько значений добавлены, он возвращает первое значение,
• getall () : используется для возврата всех значений для указанного ключа,
• имеет () : используется, чтобы проверить, есть ключ,
• Клавиши () : Возвращает объект iTerator, который вы можете использовать для перечисления доступных клавиш в объекте,
• Установить () : Используется для добавления значения на объект, с указанным ключом. Это собирается планировать значение, если ключ уже существует,
• Значения () : Возвращает объект iTerator для значений объекта FormData.

Пример загрузки файла с ванильным JavaScript

Давайте теперь увидим простой пример загрузки файла, используя Vanilla JavaScript, XMLHTTPREQUEST и Formdata Отказ

Перейдите к вашей рабочей папке и создайте и index.html Файл со следующим контентом:

Мы просто создаем HTML-документ с помощью