<input type =“ file”>を使用するときにファイル形式を制限しますか？

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

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

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

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

.xlsまたは.xlsx以外のファイルを除外する方法を提供する必要があります。element のMDNページはinput常にこれをサポートしていると言っていましたが、驚いたことに、Firefoxではバージョン42まで機能しませんでした。これはIE 10 +、Edge、およびChromeで機能します。

したがって、IE 10 +、Edge、Chrome、Operaとともに42より古いFirefoxをサポートするには、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 --> 

W3C は、MIMEタイプと対応する拡張子の両方を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 of the same：here。

参照： MIMEタイプのリスト

重要：このaccept属性を使用すると、目的のタイプのファイルをフィルタリングする方法のみが提供されます。ブラウザは、ユーザーが任意のタイプのファイルを選択できるようにします。追加の（クライアント側）チェックを実行する必要があります（JavaScriptを使用して、1つの方法はこれです）。ファイル拡張子とそのバイナリ署名（ASPの両方）を使用するMIMEタイプの組み合わせを使用して、サーバー上でファイルタイプを確認する必要があります。.NET、PHP、Ruby、Java）。ファイルタイプとそのマジックナンバーについては、これらの 表を参照することもできます。、より堅牢なサーバー側の検証を実行します。ファイルのアップロードとセキュリティに関する3つの優れた記事を

次に示します。

編集： おそらくバイナリ署名を使用したファイルタイプの検証は、HTML5ファイルAPIを使用して（拡張機能を見るだけでなく）JavaScriptを使用してクライアント側でも実行できますが、悪意のあるユーザーがファイルをサーバーで検証する必要がありますカスタムHTTPリクエストを行うことでファイルをアップロードできます。

inputタグにはaccept属性があります。ただし、信頼性はありません。ブラウザーはほとんどの場合、それを「提案」として扱います。つまり、ユーザーは、ファイルマネージャーにもよりますが、目的のタイプのみを表示する事前選択を持っています。「すべてのファイル」を選択して、必要なファイルをアップロードできます。

例えば：

<form>
    <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

HTML5仕様の詳細を読む

これは、ユーザーが適切なファイルを見つけるための「ヘルプ」としてのみ使用されることを覚えておいてください。すべてのユーザーが自分の希望するリクエストをサーバーに送信できます。サーバーサイドで常にすべてを検証する必要があります。

答えはあるので：何あなたが制限することはできませんが、あなたはできる事前選択を設定していますが、できません、それに依存しています。

あるいはまたはさらに、JavaScriptでファイル名（入力フィールドの値）をチェックすることで同様のことを行うことができますが、保護が提供されず、ユーザーの選択が容易にならないため、これはナンセンスです。それは潜在的にウェブマスターをだまして彼/彼女が保護されていると考えさせ、セキュリティホールを開けます。代替のファイル拡張子（たとえば、jpgの代わりにjpeg）を使用する、大文字を使用する、またはファイル拡張子をまったく使用しない（Linuxシステムでは一般的）場合、お尻が痛くなる可能性があります。

あなたは使用することができますchangeどのようなユーザーが選択を監視し、ファイルが受け入れられないことを、その時点でそれらを通知するイベントを。表示されるファイルの実際のリストを制限するものではありませんが、サポートが不十分なaccept属性に加えて、クライアント側で実行できる最も近いリストです。

var file = document.getElementById('someId');

file.onchange = function(e) {
  var ext = this.value.match(/\.([^\.]+)$/)[1];
  switch (ext) {
    case 'jpg':
    case 'bmp':
    case 'png':
    case 'tif':
      alert('Allowed');
      break;
    default:
      alert('Not allowed');
      this.value = '';
  }
};

<input type="file" id="someId" />

JSFiddle

はい、そうです。HTMLでは不可能です。ユーザーは彼/彼女が望むどんなファイルでも選ぶことができます。

JavaScriptコードを記述して、拡張子に基づいてファイルを送信しないようにすることができます。ただし、これによって悪意のあるユーザーが本当に必要なファイルを送信するのを防ぐことはできません。

何かのようなもの：

function beforeSubmit()
{
    var fname = document.getElementById("ifile").value;
    // check if fname has the desired extension
    if (fname hasDesiredExtension) {
        return true;
    } else {
        return false;
    }
}

HTMLコード：

<form method="post" onsubmit="return beforeSubmit();">
    <input type="file" id="ifile" name="ifile"/>
</form>

技術的には要素にaccept属性（html5では代替）を指定できますが、input適切にサポートされていません。

属性input付きのタグを使用accept

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

最新のブラウザ互換性表はこちらをクリックしてください

ここでライブデモ

画像ファイルのみを選択するには、これを使用できます accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

ここでライブデモ

gif、jpg、pngのみが表示され、Chromeバージョン44から画面を取得

私はこれが少し遅れていることを知っています。

function Validatebodypanelbumper(theForm)
{
   var regexp;
   var extension =     theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));
   if ((extension.toLowerCase() != ".gif") &&
       (extension.toLowerCase() != ".jpg") &&
       (extension != ""))
   {
      alert("The \"FileUpload\" field contains an unapproved filename.");
      theForm.FileUpload1.focus();
      return false;
   }
   return true;
}

あなたは実際にjavascriptでそれを行うことができますが、jsはクライアント側であることを覚えておいてください、したがってあなたが実際に避けたい（あなたが言ったように制限または制限する）特定のタイプのファイルを避けたいならサーバー側で行います。

サーバー側の検証を開始したい場合は、この基本的な説明をご覧ください。チュートリアル全体については、このページにアクセスしてください。

幸運を！

以前の回答で述べたように、特定のファイル形式のみのファイルを選択するようにユーザーを制限することはできません。しかし、htmlのファイル属性でAcceptタグを使用することは本当に便利です。

検証については、サーバー側で行う必要があります。jsのクライアント側でもそれを行うことができますが、それは絶対確実なソリューションではありません。サーバー側で検証する必要があります。

これらの要件のために、私はstruts2 Java Webアプリケーション開発フレームワークを本当に好みます。組み込みのファイルアップロード機能により、struts2ベースのWebアプリにファイルをアップロードするのは簡単です。アプリケーションで受け入れたいファイル形式に言及するだけで、残りのすべてはフレームワーク自体のコアによって処理されます。strutsの公式サイトでチェックできます。

私は以下を提案するかもしれません：

• ユーザーにデフォルトで画像ファイルのいずれかを選択させる必要がある場合は、accept = "image / *"を使用します。

  <input type="file" accept="image/*" />

• 特定の画像タイプに制限する場合は、accept = "image / bmp、image / jpeg、image / png"を使用します

  <input type="file" accept="image/bmp, image/jpeg, image/png" />

• 特定のタイプに制限したい場合は、accept = "。bmp、.doc、.pdf"を使用します

  <input type="file" accept=".bmp, .doc, .pdf" />

• ユーザーがファイルファイラーをすべてのファイルに変更することを制限できないため、常にスクリプトとサーバーでファイルタイプを検証してください