Объект FormData

Узнайте, что такое объект FormData и как его использовать

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

Вы создаете пустойFormDataобъект таким образом:

const fd = new FormData()

Получив предмет, вы можете вызвать один из его методов:

  • append()для добавления значения к объекту с указанным ключом. Если ключ уже существует, значение добавляется к этому ключу, не удаляя первое.
  • delete()удаляет пару ключ-значение
  • entries()дает объект Iterator, который вы можете зациклить, чтобы перечислить размещенные пары ключ-значение
  • get()получить значение, связанное с ключом. Если было добавлено более одного значения, возвращается первое.
  • getAll()получить все значения, связанные с ключом
  • has()возвращает истину, если есть ключ
  • keys()дает объект Iterator, который вы можете зациклить, чтобы перечислить размещенные ключи
  • set()для добавления значения к объекту с указанным ключом. Если ключ уже существует, значение заменяется
  • values()дает объект Iterator, который вы можете зациклить, чтобы перечислить размещенные значения

Объект FormData является частьюXMLHttpRequest 2спец. Это доступно ввсе современные браузерыно имейте в виду, что версии IE до 10 не поддерживают его.

Вот один из примеров использования FormData для отправки содержимого файла с помощью XHR-соединения:

<input type="file" id="fileUpload" />
const sendFile = file => {
  const uri = '/saveImage'
  const xhr = new XMLHttpRequest()
  const fd = new FormData()

xhr.open(‘POST’, uri, true) xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { const imageName = xhr.responseText //do what you want with the image name returned //e.g update the interface } } fd.append(‘myFile’, file) xhr.send(fd) }

const handleImageUpload = event => { const files = event.target.files sendFile(files[0]) }

document.querySelector(’#fileUpload’).addEventListener(‘change’, event => { handleImageUpload(event) })

Вместо этого этот фрагмент можно использовать для отправки нескольких файлов:

<input type="file" id="fileUpload" multiple />
const sendFiles = files => {
  const uri = '/saveImage'
  const xhr = new XMLHttpRequest()
  const fd = new FormData()

xhr.open(‘POST’, uri, true) xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { const imageName = xhr.responseText //do what you want with the image name returned //e.g update the interface } }

for (let i = 0; i < files.length; i++) { fd.append(files[i].name, files[i]) }

xhr.send(fd) }

const handleImageUpload = event => { sendFiles(event.target.files) }

document.querySelector(’#fileUpload’).addEventListener(‘change’, event => { handleImageUpload(event) })

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по браузеру: