web-dev-qa-db-ja.com

HTML入力= "ファイル"属性ファイルタイプ（CSV）を受け付ける

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

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

私のデスクトップ上の次のExcelファイルで：

  1. file1.xlsx
  2. file1.xls
  3. file.csv

ファイルをONLYにアップロードして、.xlsx、.xls、および.csvファイルを表示します。

acceptname__属性を使用して、これらのcontent-typeが.xlsxおよび.xlsの拡張機能を処理していることがわかりました...

acceptname __ = application/vnd.openxmlformats-officedocument.spreadsheetml.sheet（.XLSX）

acceptname __ = application/vnd.ms-Excel（.XLS）

ただし、Excel CSVファイルの正しいコンテンツタイプが見つかりません。助言がありますか？

例： http://jsfiddle.net/LzLcZ/

htmlcsvfile-uploadinputcontent-type
397
Dom

まあこれは恥ずかしいです...私は私が探していた解決策を見つけました、そして、それはより単純であることができませんでした。目的の結果を得るために、次のコードを使用しました。これが将来誰かに役立つことを願っています。ご協力ありがとうございました。

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

有効な承認タイプ：

CSVファイル（.csv）の場合は、次のように使用します。

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

Excelファイル97〜2003（.xls）の場合は、次のように使用します。

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

Excel Files 2007+（.xlsx）の場合は、次のように使用します。

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

Text Files（.txt）の場合：

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

Image Files（.png/.jpg/etc）の場合は、次のように使用します。

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

HTML Files（.htm、.html）の場合は、次のように使用します。

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

Video Files（.avi、.mpg、.mpeg、.mp4）の場合は、次のように使用します。

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

Audio Files（.mp3、.wavなど）の場合は、次のように使用します。

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

PDF Filesには、次のように使用します。

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

デモ：
http://jsfiddle.net/dirtyd77/LzLcZ/144/

注意：

ExcelのCSVファイル（.csv）を表示しようとしている場合は、NOTを使用してください。

  • text/csv
  • application/csv
  • text/comma-separated-values（Operaでのみ動作します）。

あなたが特定のファイルタイプ（例えばWAVやPDF）を表示しようとしているなら、これはほとんどいつもうまくいきます...

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

最近では、ファイル拡張子をそのまま使うことができます。

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>
98
Big Money

この属性は非常に古く、私の知る限り最新のブラウザでは受け入れられていませんが、これに代わるものがあります。

<script type="text/javascript" language="javascript">
function checkfile(sender) {
    var validExts = new Array(".xlsx", ".xls", ".csv");
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0) {
      alert("Invalid file selected, valid files are of " +
               validExts.toString() + " types.");
      return false;
    }
    else return true;
}
</script>

<input type="file" id="file" onchange="checkfile(this);" />

私はそれがあなたがもちろんあなたがあなたの必要性に従ってこのスクリプトを変えることができるのを助けるであろうと思います。

36
yogi

私はaccept属性でCSVのmime-typeにtext/comma-separated-valuesを使っていて、それはOperaでうまく働きます。運なしでtext/csvを試しました。

提案されたものがうまくいかない場合、CSV用の他のMIMEタイプがあります。

  • テキスト/カンマ区切り値
  • text/csv
  • application/csv
  • アプリケーション/ Excel
  • application/vnd.ms-Excel
  • application/vnd.msexcel
  • text/anytext

出典： http://filext.com/file-extension/CSV

10
jaysponsored

Safari 10では、これはうまくいきませんでした。

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

私は代わりにこれを書かなければなりませんでした：

<input type="file" accept="text/csv" />
9
trojan

次のようにするだけで、あらゆるファイルの正しいコンテンツタイプを知ることができます。

1）興味のあるファイルを選択してください。

2）そしてコンソールでこれを実行します。

console.log($('.file-input')[0].files[0].type);

また、入力に属性 "multiple"を設定して、一度に複数のファイルのコンテンツタイプを確認し、次に行うこともできます。

for (var i = 0; i < $('.file-input')[0].files.length; i++){
    console.log($('.file-input')[0].files[i].type);
}

属性の受け入れには複数の属性に関するいくつかの問題があり、この場合は正しく機能しません。

4
opiumind

@yogiの解決策を修正しました。さらに、ファイルの形式が正しくない場合は入力要素の値をリセットします。

function checkFile(sender, validExts) {
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0 && fileExt != "") {
        alert("Invalid file selected, valid files are of " +
                 validExts.toString() + " types.");
        $(sender).val("");
        return false;
    }
    else return true;
}

なぜなら、input要素でaccept属性を明示的に設定しているかどうかにかかわらず、ファイルを開くウィンドウでユーザーがオプション「All files（ '*'）」を選択できるからです。

1
RenatoIvancic

これで、新しいhtml5入力検証属性pattern=".+\.(xlsx|xls|csv)"を使うことができます。

0
iiic