Hướng dẫn what is formdata object in javascript? - đối tượng formdata trong javascript là gì?

Giao diện FormData cung cấp một cách để dễ dàng xây dựng một tập hợp các cặp khóa/giá trị biểu thị các trường biểu mẫu và các giá trị của chúng, sau đó có thể dễ dàng gửi bằng phương thức fetch() hoặc XMLHttpRequest.send(). Nó sử dụng cùng một định dạng Một biểu mẫu sẽ sử dụng nếu loại mã hóa được đặt thành "multipart/form-data".FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the fetch() or XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".

Bạn cũng có thể chuyển nó trực tiếp cho hàm tạo

Một đối tượng thực hiện FormData có thể được sử dụng trực tiếp trong cấu trúc

Lưu ý: Tính năng này có sẵn trong các nhân viên web. This feature is available in Web Workers.

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// List key/value pairs
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// List key/value pairs
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// List key/value pairs
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// List key/value pairs
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// List key/value pairs
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}

  
  Picture: 
  

  
  Picture: 
  

  
  Picture: 
  

  
  Picture: 
  

Thông số kỹ thuật

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Chương này là về việc gửi các biểu mẫu HTML: có hoặc không có tệp, với các trường bổ sung, v.v.

Các đối tượng FormData có thể giúp với điều đó. Như bạn có thể đoán, nó là đối tượng để thể hiện dữ liệu biểu mẫu HTML.

Hàm tạo là:

let formData = new FormData([form]);

Nếu phần tử HTML

  
  Picture: 
  

Điều đặc biệt về FormData là các phương thức mạng, chẳng hạn như

Từ quan điểm máy chủ, trông giống như một bản gửi biểu mẫu thông thường.

Gửi một biểu mẫu đơn giản

Hãy để gửi một hình thức đơn giản trước.

Như bạn có thể thấy, đó là gần như một lớp lót:

Trong ví dụ này, mã máy chủ không được trình bày, vì nó vượt quá phạm vi của chúng tôi. Máy chủ chấp nhận yêu cầu POST và trả lời người dùng đã lưu.

Phương pháp FormData

Chúng ta có thể sửa đổi các trường trong FormData bằng các phương thức:

• 4 - Thêm trường biểu mẫu với
  5 và
  6 đã cho

• 7 - Thêm một trường như thể nó là
  8, đối số thứ ba
  9 đặt tên tệp (không phải tên trường biểu mẫu), vì nó là tên của tệp trong hệ thống tập tin của người dùng,

• formData.append("image", imageBlob, "image.png");

  0 - Xóa trường với
  5 đã cho,

• formData.append("image", imageBlob, "image.png");

  2 - Nhận giá trị của trường với
  5 đã cho,

• formData.append("image", imageBlob, "image.png");

  4 - Nếu tồn tại một trường với
  5 đã cho, trả về

  formData.append("image", imageBlob, "image.png");

  6, nếu không

  formData.append("image", imageBlob, "image.png");

  7

Một biểu mẫu được phép về mặt kỹ thuật để có nhiều trường có cùng

formData.append("image", imageBlob, "image.png");

Ngoài ra còn có phương pháp FormData0, với cùng cú pháp với

formData.append("image", imageBlob, "image.png");

formData.append("image", imageBlob, "image.png");

• FormData6,
• FormData7.

Ngoài ra, chúng tôi có thể lặp lại các trường formdata bằng cách sử dụng vòng lặp FormData8:

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// List key/value pairs
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}

Gửi một biểu mẫu với một tệp

Biểu mẫu luôn được gửi dưới dạng

Ở đây, một ví dụ với hình thức như vậy:

  
  Picture: 
  

Gửi một biểu mẫu với dữ liệu blob

Như chúng tôi đã thấy trong chương tìm nạp, nó dễ dàng gửi dữ liệu nhị phân được tạo động, ví dụ: một hình ảnh, như fetch()1. Chúng tôi có thể cung cấp nó trực tiếp dưới dạng tham số

Mặc dù vậy, trong thực tế, nó thường thuận tiện để gửi một hình ảnh không riêng biệt, nhưng là một phần của biểu mẫu, với các trường bổ sung, chẳng hạn như tên của tên và các siêu dữ liệu khác.

Ngoài ra, các máy chủ thường phù hợp hơn để chấp nhận các hình thức được mã hóa nhiều phần, thay vì dữ liệu nhị phân thô.

Ví dụ này gửi một hình ảnh từ fetch()4, cùng với một số trường khác, làm hình thức, sử dụng FormData:

Xin lưu ý cách thêm hình ảnh fetch()1:

formData.append("image", imageBlob, "image.png");

Điều đó giống như khi có fetch()7 trong biểu mẫu và khách truy cập đã gửi một tệp có tên fetch()8 (đối số thứ 3) với dữ liệu fetch()9 (đối số thứ 2) từ hệ thống tập tin của họ.

Máy chủ đọc dữ liệu biểu mẫu và tệp, như thể nó là một bản gửi biểu mẫu thông thường.

Bản tóm tắt

Các đối tượng FormData được sử dụng để nắm bắt biểu mẫu HTML và gửi nó bằng cách sử dụng

Chúng ta có thể tạo XMLHttpRequest.send()1 từ biểu mẫu HTML hoặc tạo một đối tượng mà không có biểu mẫu, sau đó nối các trường bằng các phương thức:

• 4

• 7
• FormData6
• FormData7

Hãy lưu ý hai đặc thù ở đây:

1. Phương thức FormData0 loại bỏ các trường có cùng tên,

   formData.append("image", imageBlob, "image.png");

   9 không có. Đó là sự khác biệt duy nhất giữa họ.
2. Để gửi một tệp, cần phải có cú pháp 3-angument, đối số cuối cùng là tên tệp, thông thường được lấy từ hệ thống tập tin người dùng cho
   8.

Các phương pháp khác là:

• formData.append("image", imageBlob, "image.png");

  0

• formData.append("image", imageBlob, "image.png");

  2

• formData.append("image", imageBlob, "image.png");

  4

Đó là nó!