☰

使用時にファイル形式を制限する？ 質問する

tag-icon • tag-icon html file types
使用時にファイル形式を制限する？ 質問する

ユーザーが HTML の要素の [参照] ボタンをクリックしたときに、ネイティブ OS ファイル選択から選択できるファイルの種類を制限したいと思います。不可能な気がしますが、解決策がある<input type="file">かどうか知りたいです。HTML と JavaScript のみにしておきたいです。Flash はご遠慮ください。

ベストアンサー1

厳密に言えば、答えはノーです。開発者はフロントエンド検証（HTML/JavaScript）を使用して、ユーザーがあらゆるタイプや拡張子のファイルをアップロードするのを防ぐことはできません

。しかし、受け入れるの属性は、<input type = "file">ユーザーのブラウザ/OSが提供するファイル選択ダイアログボックスにフィルターを提供するのに役立ちます。たとえば、

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) --> 
<input type="file" accept=".xls,.xlsx" />

.xlsまたは.xlsx以外のファイルをフィルタリングする方法を提供する必要があります。翻訳page for inputelement では、常にこれがサポートされていると説明されていましたが、驚いたことに、Firefox バージョン 42 まではこれが機能しませんでした。これは、IE 10+、Edge、Chrome では機能します。

したがって、IE 10+、Edge、Chrome、Opera とともに Firefox 42 より古いバージョンをサポートするには、MIME タイプのコンマ区切りリストを使用する方が良いと思います。

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />

[ Edge (EdgeHTML) の動作: ファイル タイプ フィルターのドロップダウンには、ここで説明したファイル タイプが表示されますが、ドロップダウンの既定値ではありません。既定のフィルターは ですAll files (*)。]

MIME タイプではアスタリスクを使用することもできます。例:

<input type="file" accept="image/*" /> <!-- all image types --> 
<input type="file" accept="audio/*" /> <!-- all audio types --> 
<input type="file" accept="video/*" /> <!-- all video types -->

ウィキペディア推奨作成者は属性に MIME タイプとそれに対応する拡張子の両方を指定する必要がありますaccept。したがって、最適なアプローチは次のとおりです。

<!-- Right approach: Use both file extensions and their corresponding MIME-types. -->
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />

同じ JSFiddle:ここ。

参照： MIME タイプのリスト

重要:属性を使用するとaccept、関心のある種類のファイルをフィルタリングする方法のみが提供されます。ブラウザでは、ユーザーが任意の種類のファイルを選択できるようにしています。追加の（クライアント側の）チェックを行う必要があります（JavaScriptを使用して、1つの方法は次のようになります）。これ）、そしてファイルタイプは、ファイル拡張子とそのバイナリ署名の両方を使用したMIMEタイプの組み合わせを使用して、サーバー上で必ず検証されなければなりません（詳しくはこちら、PHP の、ルビー、ジャワ）。また、以下も参照してください。これら テーブルファイルの種類とその魔法の数字より堅牢なサーバー側検証を実行するために

、三つ 良い 読むファイルのアップロードとセキュリティについて。

編集:バイナリ署名を使用したファイルタイプの検証は、HTML5 ファイル API を使用して、JavaScript (拡張子を確認するだけでなく) を使用してクライアント側でも実行できる可能性がありますが、悪意のあるユーザーがカスタム HTTP 要求を行ってファイルをアップロードできるため、ファイルはサーバー上で検証する必要があります。

おすすめ記事