web-dev-qa-db-ja.com

ブラウザー間で一貫して特定のファイルタイプのみを受け入れるようにhtml5ファイル入力を取得するにはどうすればよいですか？

Stack Overflowに関するこの回答 によると、次のように、<input type="file" />のaccept属性を設定して、受け入れられた入力をフィルタリングできます。

accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-Excel"

ただし、以下の簡単なスニペットを実行していることに気付くように、Chrome 43.0.somethingは単に無視この構成ですが、Firefox 39.0によって完全に理解されています。

私は以下を使用して、より率直なアプローチに切り替えることを検討しました：

accept=".xls, .xlsx"

...Chromeでは問題なく機能しますが、Firefoxがやや混乱し、.xlsx拡張子を使用したファイルのみを受け入れます。

これはおそらく非常に一般的で基本的なものであることを考えると、何か足りないことがあるはずです。 ブラウザ間で一貫して.xlsおよび.xlsxファイルのみを提案するhtml5ファイル入力を取得するにはどうすればよいですか？

これが私の問題を示すコードスニペットです（ JSFiddleリンク と一緒にいじりたい場合に備えて）。

Accepts application/vnd.ms-Excel and the likes:<br />
<label for="file1">File input</label>
<input type="file" name="file1" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-Excel"/>
<hr />
Accepts .xls and .xlsx:<br />
<label for="file2">File input</label>
<input type="file" name="file2" accept=".xls, .xlsx"/>
htmlfile-uploadinputcontent-type
17
ccjmne

MIMEタイプと拡張子の両方を転送します

<input type="file" name="file2" accept="text/csv, .csv"/>
12
cetver

免責事項：これは答えではありません何らかの手段によるものですが、この属性を間違った方法で使用しようとしている他の潜在的な読者への単なるメモです。

accept属性の この非公式のW3C参照 では、以下を見つけることができます。

ヒント：この属性を検証ツールとして使用しないでください。ファイルのアップロードはサーバーで検証する必要があります。

この属性を検証に使用することは推奨されません。これは、ユーザーが何らかの方法で回避でき、すべてのブラウザが同じように動作するわけではないためです。

1
Martin Godzina

スペースを削除

accept=".xls, .xlsx"

に

accept=".xls,.xlsx"

Chrome 69およびFirefox 61で動作します。Safariではテストしていません。IEおよびEdge。

1
st0at

最初に、あなたは間違いなくhtml5 doctypeを持っていますか？

<!DOCTYPE html>

まだ行っていない場合は、場所によっては機能しない可能性があります。

次に、htmlを使用する代わりに、javascriptまたはjqueryを使用できます。この質問/回答を参照してください： jquery-アップロードする前にファイル拡張子を確認してください

3つ目：私の経験では、一部のhtml5が機能しないことがあります。理由はわかりませんが、たとえばjqueryを使用して問題を回避する必要があります。

とにかく常にサーバー側の検証を行って、ユーザーがアップロードしているものが実際に制限されていることを確認する必要があります。

0
Jacbey