Webサイトにファイルのアップロード機能を追加することがこれまで何度かありました。
その際、いつも追加を忘れていて悩むんでしまうことがあり、今回も同じことの追加を忘れていた悩んでいました。

ファイルがアップロードされない

以下のようなHTMLのフォームがあったとします。

<form action="next.html" method="post" id="form">
    <input type="text" name="name" id="mame" value="">
    <input type="submit" name="submit" id="submit" value="次へ">
</form>

単純にアップロードするファイルを選択できるように追加します。
これでアップロードできると思って動作を確認すると、選ばれたファイルがサーバーにアップロードされていません。

<form action="next.html" method="post" id="form">
    <input type="text" name="name" id="mame" value="">
    <input type="file" name="file" id="file">
    <input type="submit" name="submit" id="submit" value="次へ">
</form>

f:id:AJYA:20170125060828j:plain
photo credit: http://tvorbaweb-stranok.sk Meta and title tags in HTML code via photopin (license)

formタグにenctypeの記述が不足している

なぜだろうと悩んで、既存のファイルをアップロードできているサイトのソースコードを見て、formタグに「enctype="multipart/form-data"」の追加が必要なことに気がつきました。

<form action="next.html" method="post" id="form" enctype="multipart/form-data">
    <input type="text" name="name" id="mame" value="">
    <input type="file" name="file" id="file">
    <input type="submit" name="submit" id="submit" value="次へ">
</form>