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êndelete()
xóa một cặp giá trị khóaentries()
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êngetAll()
nhận tất cả các giá trị được liên kết với một khóahas()
trả về true nếu có khóakeys()
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
Các hướng dẫn khác về trình duyệt:
- Một số thủ thuật hữu ích có sẵn trong HTML5
- Cách tôi làm cho một trang web dựa trên CMS hoạt động ngoại tuyến
- Hướng dẫn hoàn chỉnh về ứng dụng web tiến bộ
- API tìm nạp
- Hướng dẫn API đẩy
- API nhắn tin kênh
- Hướng dẫn Nhân viên Dịch vụ
- Hướng dẫn API bộ nhớ cache
- Hướng dẫn API thông báo
- Đi sâu vào IndexedDB
- API Bộ chọn: querySelector và querySelectorAll
- Tải JavaScript hiệu quả với trì hoãn và không đồng bộ
- Mô hình đối tượng tài liệu (DOM)
- API lưu trữ web: lưu trữ cục bộ và lưu trữ phiên
- Tìm hiểu cách hoạt động của HTTP Cookies
- API lịch sử
- Định dạng hình ảnh WebP
- XMLHttpRequest (XHR)
- Hướng dẫn chuyên sâu về SVG
- URL dữ liệu là gì
- Lộ trình tìm hiểu Nền tảng Web
- CORS, Chia sẻ tài nguyên đa nguồn gốc
- Nhân viên web
- Hướng dẫn requestAnimationFrame ()
- Doctype là gì
- Làm việc với Bảng điều khiển DevTools và API Bảng điều khiển
- API tổng hợp giọng nói
- Cách chờ sự kiện DOM sẵn sàng bằng JavaScript thuần túy
- Cách thêm lớp vào phần tử DOM
- Cách lặp qua các phần tử DOM từ querySelectorAll
- Cách xóa một lớp khỏi phần tử DOM
- Cách kiểm tra xem một phần tử DOM có một lớp hay không
- Cách thay đổi giá trị nút DOM
- Cách thêm sự kiện nhấp chuột vào danh sách các phần tử DOM được trả về từ querySelectorAll
- WebRTC, API web thời gian thực
- Cách lấy vị trí cuộn của một phần tử trong JavaScript
- Cách thay thế một phần tử DOM
- Cách chỉ chấp nhận hình ảnh trong trường tệp đầu vào
- Tại sao sử dụng phiên bản xem trước của trình duyệt?
- Đối tượng Blob
- Đối tượng tệp
- Đối tượng FileReader
- Đối tượng FileList
- ArrayBuffer
- ArrayBufferView
- Đối tượng URL
- Mảng đã nhập
- Đối tượng DataView
- API BroadcastChannel
- API luồng
- Đối tượng FormData
- Đối tượng Điều hướng
- Cách sử dụng API vị trí địa lý
- Cách sử dụng getUserMedia ()
- Cách sử dụng API Kéo và Thả
- Cách làm việc với tính năng cuộn trên các Trang Web
- Xử lý các biểu mẫu trong JavaScript
- Sự kiện bàn phím
- Sự kiện chuột
- Chạm vào sự kiện
- Cách xóa tất cả phần tử con khỏi phần tử DOM
- Cách tạo thuộc tính HTML bằng vanilla Javascript
- Làm cách nào để kiểm tra xem một hộp kiểm đã được chọn bằng JavaScript hay chưa?
- Cách sao chép vào khay nhớ tạm bằng JavaScript
- Cách tắt một nút bằng JavaScript
- Cách làm cho một trang có thể chỉnh sửa trong trình duyệt
- Cách lấy giá trị chuỗi truy vấn trong JavaScript với URLSearchParams
- Cách xóa tất cả CSS khỏi một trang cùng một lúc
- Cách sử dụng insertAdjacentHTML
- Safari, cảnh báo trước khi thoát
- Cách thêm hình ảnh vào DOM bằng JavaScript
- Cách đặt lại biểu mẫu
- Cách sử dụng Google Fonts