1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

javascript FormDataオブジェクトの中身確認

Last updated at Posted at 2021-07-06

Every Qiita #4
のんびり独学初学者の毎日投稿チャレンジ 4日目
今回は・・・
自作コミュニティアプリ開発でフォームデータの中身をjavascriptで確認する際に躓いた時の備忘録です

##FormDataで送られたデータを確認したい

index.js
const 任意の変数 = document.getElementById('任意のid');
定義した変数.addEventListener("イベント", function(event){
const data = 定義した変数.files[0];//input type=fileの場合
const form_data = new FormData();
form_data.append("任意のname",data);

FormDataインスタンスを作成するとinputから送られてきたデータを取得することができます。
何が送られているのか確認したいので、

console.log(form_data);

結果: FormData{}
あれ?
確認できない・・・

###修正後

console.log(...form_data.entries());

結果: ["image",File]
0: "image"
1: File {name: "画像名.png"}
length: 2
確認できました!
オブジェクトなので、関数使って中身確認しないといけないみたいです。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?