Đối tượng FormData

Tìm hiểu đối tượng FormData là gì và cách sử dụng nó

CácFormDatađối tượng được sử dụng để giữ các giá trị biểu mẫu trong cấu trúc dữ liệu cặp khóa-giá trị.

Bạn tạo ra một sản phẩm trốngFormDatađối tượng theo cách này:

const fd = new FormData()

Khi bạn có mục, bạn có thể gọi một trong các phương thức của nó:

append()để thêm một giá trị vào đối tượng, với khóa được chỉ định. Nếu khóa đã tồn tại, giá trị sẽ được thêm vào khóa đó mà không loại bỏ khóa đầu tiên
delete()xóa một cặp giá trị khóa
entries()cung cấp cho một đối tượng Iterator mà bạn có thể lặp lại để liệt kê các cặp giá trị khóa được lưu trữ
get()nhận giá trị được liên kết với một khóa. Nếu nhiều hơn một giá trị được thêm vào, nó sẽ trả về giá trị đầu tiên
getAll()nhận tất cả các giá trị được liên kết với một khóa
has()trả về true nếu có khóa
keys()cung cấp cho một đối tượng Iterator mà bạn có thể lặp lại để liệt kê các khóa được lưu trữ
set()để thêm một giá trị vào đối tượng, với khóa được chỉ định. Nếu khóa đã tồn tại, giá trị sẽ được thay thế
values()cung cấp cho một đối tượng Iterator mà bạn có thể lặp lại để liệt kê các giá trị được lưu trữ

Đối tượng FormData là một phần củaXMLHttpRequest 2thông số kỹ thuật. Nó có sẵn trongtất cả các trình duyệt hiện đạinhưng hãy nhớ rằng các phiên bản IE trước 10 không hỗ trợ nó.

Dưới đây là một ví dụ về việc sử dụng FormData để gửi nội dung của tệp bằng kết nối 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)
})

Thay vào đó, đoạn mã này có thể được sử dụng để gửi nhiều tệp:

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

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript

Đối tượng FormData

Tìm hiểu đối tượng FormData là gì và cách sử dụng nó

Các hướng dẫn khác về trình duyệt: