HTML入力=「ファイル」属性ファイルタイプの受け入れ（CSV）

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

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

私のデスクトップに次のExcelファイルがあります：

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

私は、ファイルのアップロードがしたいONLY示し.xlsx、.xls＆.csvファイルを。

使用するaccept属性を、私はこれらのコンテンツ・タイプはの世話をした見つかっ.xlsx＆.xls拡張...

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

accept= application / vnd.ms-excel（.XLS）

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

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

まあこれは恥ずかしいです...私が探していた解決策を見つけました、そしてそれはもっと簡単なことではありませんでした。次のコードを使用して、目的の結果を取得しました。これが将来の誰かを助けることを願っています。皆さんの助けに感謝します。

<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ファイル2007+（.xlsxの）、使用：

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

以下のためのテキストファイル（.TXT）使用：

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

以下のための画像ファイル（.pngの/ .JPG /など）、使用：

<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" /> 

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

注意：

Excel CSVファイル（.csv）を表示する場合は、使用しないでください。

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

特定のファイルの種類（たとえば、a WAVまたはPDF）を表示しようとしている場合、これはほとんど常に機能します...

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

最近では、ファイル拡張子を使用することができます

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

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

<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);" />

もちろん、このスクリプトは必要に応じて変更できます。

text/comma-separated-valuesAccept属性でCSVのMIMEタイプを使用しましたが、Operaでは問題なく動作します。試しましたtext/csv運なし。

提案されたものが機能しない場合のCSVのその他のMIMEタイプ：

• text / comma-separated-values
• テキスト/ csv
• application / csv
• アプリケーション/エクセル
• application / vnd.ms-excel
• application / vnd.msexcel
• テキスト/任意のテキスト

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

これはSafari 10では機能しませんでした。

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

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

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

次の操作を行うだけで、ファイルの正しいコンテンツタイプを確認できます。

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);
}

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

@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;
}

開いているファイルウィンドウで、ユーザーが入力要素で明示的にaccept属性を設定しているかどうかに関係なく、オプション「すべてのファイル（ '*'）」を選択できるため、カスタム検証ビルトインがあります。

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