Bạn có thể cho tôi biết có chuyện gì với điều này không:

var formdata = new FormData();
formdata.append("key", "value");
console.log(formdata);

Đầu ra của tôi trông như thế này, tôi không thể tìm thấy cặp "khóa" - "giá trị" của mình

FormData
*__proto__: FormData
**append: function append() { [native code] }
***arguments: null
***caller: null
***length: 0
***name: "append"
***prototype: append
***__proto__: function Empty() {}
*constructor: function FormData() { [native code] }
**arguments: null
**caller: null
**length: 0
**name: "FormData"
**prototype: FormData
**toString: function toString() { [native code] }
*__proto__: Object
**__proto__: Object
**__defineGetter__: function __defineGetter__() { [native code] }
**__defineSetter__: function __defineSetter__() { [native code] }
**__lookupGetter__: function __lookupGetter__() { [native code] }
**__lookupSetter__: function __lookupSetter__() { [native code] }
**constructor: function Object() { [native code] }
**hasOwnProperty: function hasOwnProperty() { [native code] }
**isPrototypeOf: function isPrototypeOf() { [native code] }
**propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
**toLocaleString: function toLocaleString() { [native code] }
**toString: function toString() { [native code] }
**valueOf: function valueOf() { [native code] }

Tôi không thể hiểu được! Hôm qua nó hoạt động rất tốt, và hôm nay đầu tôi bị rơi bàn phím rất nhiều lần! Firefox, Chrome, cả hai đều giống nhau: /

Tính năng mới trong Chrome 50+ và Firefox 39+ (tương ứng 44+):

• formdata.entries()(kết hợp với Array.from()để gỡ lỗi)
• formdata.get(key)
• và nhiều phương pháp rất hữu ích khác

Câu trả lời ban đầu:

Những gì tôi thường làm để 'gỡ lỗi' một FormDatađối tượng, chỉ là gửi nó (ở bất kỳ đâu!) Và kiểm tra nhật ký trình duyệt (ví dụ: tab Mạng của Chrome devtools).

Bạn không cần một / cùng một khung Ajax. Bạn không cần bất kỳ chi tiết nào. Chỉ cần gửi nó:

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(data);

Dễ dàng.

Bạn nói rằng nó không hoạt động. Bạn đang mong đợi điều gì xảy ra?

Không có cách nào để lấy dữ liệu ra khỏi một FormDatađối tượng; nó chỉ dành cho bạn để sử dụng để gửi dữ liệu cùng với một XMLHttpRequestđối tượng (cho sendphương thức).

Cập nhật gần 5 năm sau: Trong một số trình duyệt mới hơn, điều này không còn đúng nữa và bây giờ bạn có thể xem dữ liệu được cung cấp FormDatangoài việc chỉ cần nhồi dữ liệu vào đó. Xem câu trả lời được chấp nhận để biết thêm thông tin.

Bạn có thể đã gặp phải cùng một vấn đề mà tôi đã gặp phải lúc đầu. Tôi đang cố gắng sử dụng FormData để lấy tất cả các tệp đầu vào của mình để tải lên hình ảnh, nhưng đồng thời tôi muốn thêm ID phiên vào thông tin được chuyển đến máy chủ. Lúc này, tôi nghĩ rằng bằng cách thêm thông tin, bạn sẽ có thể thấy nó trong máy chủ bằng cách truy cập vào đối tượng. Tôi đã sai. Khi bạn thêm vào FormData, cách để kiểm tra thông tin được nối thêm trên máy chủ là bằng một $_POST['*your appended data*']truy vấn đơn giản . như vậy:

js:

$('form').submit(function(){
    var sessionID = 8;
    var formData = new FormData(this);
    formData.append('id', sessionID);

    $.ajax({
        url: "yoururl.php",
        data: formData,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data){
            alert(data);
        }
    });
});

sau đó trên php:

$sessionID = $_POST['id'];
$files = $_FILES['image'];

$foreach ($files as $key=>val){
    //...
}

Nếu bạn đang ở trong Chrome, bạn có thể kiểm tra Dữ liệu đăng

Đây là Cách kiểm tra dữ liệu Đăng

1. Đi tới tab Mạng
2. Tìm Liên kết mà bạn đang gửi Dữ liệu Đăng
3. Nhấn vào nó
4. Trong Tiêu đề, bạn có thể kiểm tra Yêu cầu tải trọng để kiểm tra dữ liệu bài đăng

bạn có thể thấy nó bạn cần sử dụng console.log(formData.getAll('your key')); xem https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll

dữ liệu biểu mẫu không xuất hiện trong bảng điều khiển trình duyệt web

for (var data of formData) {
  console.log(data);
}

hãy thử cách này nó sẽ hiển thị

Trong trường hợp của tôi trên trình duyệt Edge:

  const formData = new FormData(this.form);
  for (const [key, value] of formData.entries()) {
      formObject[key] = value;
  }

cho tôi cùng một lỗi

Vì vậy, tôi không sử dụng FormDatavà tôi chỉ xây dựng một đối tượng theo cách thủ công

import React from 'react';    
import formDataToObject from 'form-data-to-object';

  ...

let formObject = {};

// EDGE compatibility -  replace FormData by
for (let i = 0; i < this.form.length; i++) {
  if (this.form[i].name) {
    formObject[this.form[i].name] = this.form[i].value;
  }
}

const data = formDataToObject.toObj(formObject): // convert "user[email]":"customer@mail.com" => "user":{"email":"customer@mail.com"}

const orderRes = await fetch(`/api/orders`, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      });

const order = await orderRes.json();

Phiên bản React

Đảm bảo có tiêu đề với 'content-type': 'multipart/form-data'

_handleSubmit(e) {
    e.preventDefault();
    const formData = new FormData();
          formData.append('file', this.state.file);
    const config = {
      headers: {
        'content-type': 'multipart/form-data'
      }
    }

     axios.post("/upload", formData, config)
         .then((resp) => {
             console.log(resp)
         }).catch((error) => {
    })
  }

  _handleImageChange(e) {
    e.preventDefault();
    let file = e.target.files[0];
    this.setState({
      file: file
    });
  }

Lượt xem

  #html
 <input className="form-control"
    type="file" 
    onChange={(e)=>this._handleImageChange(e)} 
 />