1. ホーム
  2. html

[解決済み] HTML Input="file" Accept Attribute File Type (CSV)

2022-03-16 11:30:40

質問

私のページには、ファイルアップロードオブジェクトがあります。

<input type="file" ID="fileSelect" />

を、デスクトップ上の以下のエクセルファイルで作成しました。

  1. file1.xlsx
  2. ファイル1.xls
  3. ファイル.csv

ファイルのアップロード先を ONLY 表示 .xlsx , .xls , & .csv ファイルを作成します。

を使用することで accept 属性を使用すると、これらのコンテンツタイプで対処できることがわかりました。 .xlsx &です。 .xls エクステンション...

accept = application/vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX)

accept = application/vnd.ms-excel (.XLS)

しかし、ExcelのCSVファイルに適したcontent-typeが見当たりません! 何か提案はありますか?

http://jsfiddle.net/LzLcZ/

解決方法は?

いやあ、恥ずかしい話ですが...。探していた解決策を見つけたのですが、これ以上ないほどシンプルでした。次のコードで目的の結果を得ることができました。

<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />  

有効なAcceptタイプ。

対象 CSV ファイル(.csv)を使用します。

<input type="file" accept=".csv" />

について エクセルファイル 97-2003 (.xls) を使用します。

<input type="file" accept="application/vnd.ms-excel" />

について Excelファイル2007以上 (.xlsx) を使用します。

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

について テキストファイル (.txt) を使用します。

<input type="file" accept="text/plain" />

について 画像ファイル (.png/.jpg/etc) を使用してください。

<input type="file" accept="image/*" />

について HTMLファイル (.htm,.html) を使用します。

<input type="file" accept="text/html" />

について 動画ファイル (.avi, .mpg, .mpeg, .mp4) を使用してください。

<input type="file" accept="video/*" />

について オーディオファイル (.mp3, .wav, など) を使用してください。

<input type="file" accept="audio/*" />

について PDFファイル を使用します。

<input type="file" accept=".pdf" /> 

DEMO
http://jsfiddle.net/dirtyd77/LzLcZ/144/


NOTE

ExcelのCSVファイルを表示させようとしている場合( .csv を実行します。 NOT を使用します。

  • text/csv
  • application/csv
  • text/comma-separated-values ( はOperaでのみ動作します。 ).

を表示させようとしている場合 特定のファイルタイプ (例えば WAV または PDF を使用すると、ほとんどの場合、うまくいきます。

 <input type="file" accept=".FILETYPE" />