Javascrip{filter}t FormData подробно и его использование

Администратора · Опубликовано 08.05.2018 16:30:39

FormData — это подробное введение и использование https://developer.mozilla.org/zh ... ng_FormData_Objects

Методы и события FormData там уже очень понятны, так что я не буду тратить на них время. В этой статье в основном объясняется использование объектов FormData и асинхронные загрузки файлов.

Объект FormData позволяет нам организовать набор пар ключ-значение, отправленных с помощью объекта XMLHttpRequest. Он в основном используется для отправки данных форм, но может применяться независимо от передачи данных с помощью форм.

1. Создать объект FormData с нуля

Вы можете создать собственный объект FormData и затем добавить пары ключ-значение к объекту с помощью метода append(), следующим образом:

Вход виден.

Примечание: Оба поля «userfile» и «webmasterfile» содержат файлы. Номер, назначенный полю «accountnum», напрямую преобразуется в строку методом FormData.append() (значение поля может быть blob, file или string: если значение не является ни blob, ни файлом, значение преобразуется в строку).

В этом примере создаётся экземпляр FormData с полями «username», «accountnum», «userfile» и «webmasterfile», а затем используется метод send() объекта XMLHttpRequest для отправки данных формы. Поле «webmasterfile» — это blob. Объект blob представляет собой сырые данные файлового объекта. Но данные, представленные blob-ом, не обязательно должны быть в нативном формате javascript. Файловый интерфейс основан на blobs, унаследовав функциональность blob и расширяя поддержку пользовательских файловых систем. Чтобы построить blob, можно вызвать конструктор Blob().

2. Получить объект FormData из HTML-формы

Чтобы получить объект FormData с существующими данными формы, необходимо указать элемент формы при создании объекта FormData.

Вход виден.

Типа того:

Вход виден.

Вы также можете добавить дополнительные данные после получения объекта FormData, например:

Вход виден.

Это позволяет добавить дополнительную информацию перед отправкой, не обязательно отредактированную пользователем.

3. Используйте объект FormData для отправки файла

Вы можете использовать FormData для отправки файлов. Простая <form>середина <input>может включать элемент:

Вход виден.

Затем вы можете использовать следующий код для отправки:

Вход виден.

Вы также можете добавить File или Blob напрямую к объекту FormData, вот так:

Вход виден.

При использовании метода append() может использоваться третий параметр для отправки имени файла (отправленного на сервер через заголовок Content-Disposition). Если третий параметр не указан или этот параметр не поддерживается, третий параметр по умолчанию становится «blob».

Если вы настроите правильные параметры, вы также можете использовать его с jQuery:

Вход виден.

[Jquery] Javascrip{filter}t FormData подробно и его использование

Связанные публикации

Просмотренные разделы