1. 犀牛前端部落首页
  2. Html5百科

FormData对象

了解什么是FormData对象以及如何使用它。

FormData对象

FormData对象用于保存键值对数据结构中的表单值。

你可以这样创建一个空的FormData对象:

/**
* 犀牛前端部落
* https://www.pipipi.net/
*/
const fd = new FormData()

一旦你有子项,你可以调用下面的其中之一方法:

  • append()使用指定的键向对象添加值。如果键已经存在,则将值添加到该键,而不删除第一个键
  • delete()删除键值对
  • entries()提供了一个迭代器对象,您可以循环该对象以列出驻留的键值对
  • get()获取与键关联的值。如果追加了多个值,它将返回第一个值
  • getAll()获取与键关联的所有值
  • has() 如果是键名,返回true
  • keys()提供一个迭代器对象,您可以循环该对象来列出托管的键
  • set()使用指定的键向对象添加值。如果键已经存在,则替换该值
  • values()提供一个迭代器对象,您可以循环该对象来列出托管的值

FormData对象是XMLHttpRequest 2规范的一部分。它在所有现代浏览器中都可用,但请记住,10年前的IE版本不支持它。

下面是使用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)
})

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3316.html

发表评论

登录后才能评论