2020年03月29日

formでfileをpost送信する際に忘れがちなこと

formタグでファイルを送信する際

お世話になっております。SeekNextです。
最近、フロントエンドブログの更新が止まっていたので、また再開していきたいと思います。

今回はformタグを使用して、fileを送信する際に覚えておくべきことを書いていきます。基本的なformタグの使用は以下の通りです。

<form action="" method="post">
  <input type="text" id="ttl" name="ttl" value="" required>
  <button type="submit">送信する</button>
</form>

inputには様々なtypeを設定することが可能で、以下の通りです。

<input type="text" name="">
<input type="search" name="">
<input type="tel" name="">
<input type="url" name="">
<input type="email" name="">
<input type="datetime" name="">
<input type="date" name="">
<input type="month" name="">
<input type="week" name="">
<input type="time" name="">
<input type="datetime-local" name="">
<input type="number" name="">
<input type="range" name="">
<input type="color" name="">
<input type="checkbox" name="">
<input type="radio" name="">
<input type="file" name="">
<input type="submit" name="">
<input type="image" name="">
<input type="reset" name="">
<input type="button" name="">

個人的な経験では、「text」「tel」「email」「number」「checkbox」「radio」が使用頻度が多いです。

その際にファイルを送信する際は「type=”file”」を使用しますが、以下のコードではpostされません。

<form action="" method="post">
  <input type="file" name="file1">
  <button type="submit">送信する</button>
</form>

これを解決する際には以下のコードを追加します。enctype=”multipart/form-data”

<form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="file1">
  <button type="submit">送信する</button>
</form>

これで思い通りに送信可能になります。enctype=”multipart/form-data”に関してはプログラミングあるある「おまじない」という認識で問題ありませんが、詳しく知りたい方はこちらを参考にしてください。