CSVファイルアップロードの完全ガイド: HTML、JavaScript、サーバーサイド

2024-04-02

HTML Input="file" Accept 属性を用いた CSV ファイルアップロード

accept 属性は、<input type="file"> 要素で使用され、クライアント側で許可するファイルの種類を指定します。これは、ユーザーがファイルを選択するダイアログボックスに表示されるファイルフィルタとして機能します。

CSV ファイルの MIME タイプ

CSV ファイルは、通常、以下の MIME タイプで送信されます。

text/csv
application/csv
application/vnd.ms-excel

accept 属性には、許可するファイルの種類をカンマ区切りで指定します。例えば、CSV ファイルのみを許可する場合は、以下の値を設定します。

accept=".csv"

複数の MIME タイプを許可する場合は、以下の様に記述します。

accept=".csv,text/csv,application/csv"

ブラウザの対応状況

accept 属性は、主要なブラウザでサポートされています。ただし、古いブラウザでは動作しない場合があります。

以下のコードは、CSV ファイルのみをアップロードできるフォームの例です。

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file" accept=".csv">
  <input type="submit" value="アップロード">
</form>

注意事項

accept 属性は、あくまでもクライアント側のフィルタ機能であり、サーバー側でファイルの種類を検証する必要があります。
すべてのブラウザが accept 属性をサポートしているわけではないため、古いブラウザでは動作しない可能性があります。

関連用語

HTML
CSV
ファイルアップロード
MIME タイプ
accept 属性

その他

この解説は、基本的な内容のみを説明しています。詳細は、上記の参考資料を参照してください。

改善点

冒頭に、この解説が誰にとって役に立つのかを明記する。
各項目をより簡潔にまとめ、読みやすくする。
サンプルコードをより詳細に解説する。
補足情報に、関連するチュートリアルや記事へのリンクを追加する。

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file" accept=".csv" required>
  <input type="submit" value="アップロード">
</form>

解説

action 属性: アップロードされたファイルを送信するサーバー側のスクリプトの URL を指定します。
method 属性: ファイル送信方法を指定します。post は、ファイルデータを POST リクエストの本文に含めて送信します。
enctype 属性: 送信するデータのエンコーディング形式を指定します。multipart/form-data は、ファイルアップロード時に必要な形式です。
name 属性: 送信されたファイルに割り当てる名前を指定します。
required 属性: このフィールドが必須であることを指定します。
value 属性: 送信ボタンのラベルを指定します。