정보실

웹학교

정보실

javascript FormData 객체

본문

FormData 객체는 키 - 값 쌍 데이터 구조에 양식 값을 저장하는 데 사용됩니다.

다음과 같이 빈 FormData 객체를 만듭니다.


const fd = new FormData()


아이템을 얻으면 메소드 중 하나를 호출 할 수 있습니다.

  • append() : 지정된 키를 사용하여 객체에 값을 추가합니다. 키가 이미 존재하는 경우 첫 번째 키를 제거하지 않고 해당 키에 값이 추가됩니다.
  • delete()는 키 값 쌍을 삭제합니다.
  • entries()는 호스팅 된 키 값 쌍을 나열하기 위해 반복 할 수 있는 Iterator 객체를 제공합니다.
  • get() 키와 관련된 값을 가져옵니다. 두 개 이상의 값이 추가 된 경우 첫 번째 값이 반환됩니다.
  • getAll() 키에 관련된 모든 값을 가져옵니다.
  • has()는 키가 있으면 true를 반환합니다.
  • keys()는 호스팅 된 키를 나열하기 위해 반복 할 수 있는 Iterator 객체를 제공합니다.
  • set() : 지정된 키를 사용하여 객체에 값을 추가합니다. 키가 이미 있으면 값이 대체됩니다.
  • values​​()는 호스팅 된 값을 나열하기 위해 반복 할 수 있는 Iterator 객체를 제공합니다.


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])
}

$('#fileUpload').addListener('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)
}

$('#fileUpload').addListener('change', event => {
  handleImageUpload(event)
})



페이지 정보

조회 44회 ]  작성일19-07-18 08:43

웹학교