[解決済み】<input type="file">でファイル形式を制限する？

質問

の参照ボタンをクリックしたときに、ネイティブOSのファイル選択ツールから選択できるファイルの種類を制限したいのですが、どうすればよいでしょうか？ <input type="file"> 要素を使用します。無理な気がするのですが、もしあれば教えていただきたいのです。 は 解決策 HTMLとJavaScriptのみで、Flashは使わないでほしい。

どのように解決するのですか？

厳密には、答えは いいえ . 開発者 できない は、ユーザーが任意のタイプまたは拡張子のファイルをアップロードすることを防ぎます。

しかし、それでも 受け入れる 属性は <input type = "file"> は、OSのファイル選択ダイアログボックスでフィルタを提供するのに役立ちます。例えば

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

は、.xls または .xlsx 以外のファイルをフィルタリングする方法を提供する必要があります。ただし MDN のページです。 input 要素は常にこれをサポートすると言っていたのですが、なんと、バージョン42までのFirefoxでは、これがうまくいきませんでした。IE10+、Edge、Chromeでは動作します。

ということは、42より古いFirefoxをIE 10+、Edge、Chrome、Operaとともにサポートするには、MIME-typesのカンマ区切りリストを使った方が良いということですね。

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

[ エッジ (EdgeHTML)の挙動を示します。ファイルタイプフィルタのドロップダウンには、ここで説明したファイルタイプが表示されますが、ドロップダウンのデフォルトではありません。デフォルトのフィルターは All files (*) .]

MIME-typesにアスタリスクを使用することもできます。例えば

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

W3C 推奨 の作者は、MIME-types とそれに対応する拡張子の両方を accept 属性があります。そのため ベスト というアプローチになります。

<!-- Right approach: Use both file extensions and 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-typesの一覧

重要です。 を使用すると accept 属性は、関心のある種類のファイルをフィルタリングする方法を提供するだけです。ブラウザは、ユーザーがどのようなタイプのファイルでも選択できるようになっています。追加の（クライアントサイドの）チェックを行う必要があります（JavaScriptを使用する、一つの方法は これ というファイルタイプがあります。 サーバーで検証する必要があります。 は、ファイル拡張子とそのバイナリ署名の両方を使用した MIME タイプの組み合わせを使用して ( ASP.NET , PHP , ルビー , Java ). を参照するのもよいでしょう。 これら テーブル ファイルの種類とその マジックナンバー のように、より強固なサーバーサイドの検証を行うことができます。

以下は 三 良い は読みます。 ファイルアップロードとセキュリティについて。

EDIT バイナリ署名を使ったファイルタイプの検証は、HTML5 File API を使ってクライアント側でも JavaScript で（拡張子を見るだけでなく）できるかもしれませんが、それでも悪意のあるユーザーがカスタム HTTP リクエストでファイルをアップロードできるため、サーバーでファイルを検証する必要があります。