自分のページにファイルアップロードオブジェクトがあります。
<input type="file" ID="fileSelect" />
私のデスクトップ上の次のExcelファイルで:
- file1.xlsx
- file1.xls
- file.csv
ファイルをONLYにアップロードして、.xlsx
、.xls
、および.csv
ファイルを表示します。
accept
name__属性を使用して、これらのcontent-typeが.xlsx
および.xls
の拡張機能を処理していることがわかりました...
accept
name __ = application/vnd.openxmlformats-officedocument.spreadsheetml.sheet(.XLSX)
accept
name __ = application/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 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" />
最近では、ファイル拡張子をそのまま使うことができます。
<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);" />
私はそれがあなたがもちろんあなたがあなたの必要性に従ってこのスクリプトを変えることができるのを助けるであろうと思います。
私はaccept属性でCSVのmime-typeにtext/comma-separated-values
を使っていて、それはOperaでうまく働きます。運なしでtext/csv
を試しました。
提案されたものがうまくいかない場合、CSV用の他のMIMEタイプがあります。
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;
}
なぜなら、input要素でaccept属性を明示的に設定しているかどうかにかかわらず、ファイルを開くウィンドウでユーザーがオプション「All files( '*')」を選択できるからです。
これで、新しいhtml5入力検証属性pattern=".+\.(xlsx|xls|csv)"
を使うことができます。