ページにファイル アップロード オブジェクトがあります。
<input type="file" ID="fileSelect" />
私のデスクトップ上の次のExcelファイルで：
- ファイル1.xlsx
- ファイル1.xls
- ファイル.csv
ファイルのアップロードで、、、およびファイルのみを表示したい。.xlsx.xls.csv
属性を使用して、acceptこれらのコンテンツ タイプが.xlsx&.xls拡張機能を処理することがわかりました...
accept= application/vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX)
accept= アプリケーション/vnd.ms-excel (.XLS)
しかし、Excel CSV ファイルの正しいコンテンツ タイプが見つかりません。助言がありますか？
うーん、これは恥ずかしい...私が探していた解決策を見つけましたが、これ以上簡単ではありませんでした。次のコードを使用して、目的の結果を取得しました。
<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/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" />
デモ:
http://jsfiddle.net/dirtyd77/LzLcZ/144/
ノート：
.csvExcel CSV ファイル ( )を表示しようとしている場合は、次を使用しないでください。
text/csvapplication/csvtext/comma-separated-values( Opera のみで動作します)。特定のファイル タイプ(aWAVや など)を表示しようとしている場合PDF、これはほとんど常に機能します...
<input type="file" accept=".FILETYPE" />
Dom この属性は非常に古く,私の知る限り現代のブラウザでは受け入れられません. しかし,これに代わるものがあります. これを試してください.
<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-typeを使用しており、Operaで正常に動作します。運text/csvが悪かった。
提案されたものが機能しない場合の CSV のその他の MIME タイプ:
@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)"た。