<input type = "file">を使用する場合のファイル形式を制限しますか？

Question

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

Answer 1

厳密に言えば、答えはで、です。開発者はで、ユーザーがネイティブOSファイル選択ダイアログボックスで任意のタイプまたは拡張子のファイルを選択できないようにすることはできません。

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

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

は.XLSまたは.xlsx形式のファイル以外のファイルをフィルタリングする方法を提供する必要があります。私が驚いたことに、これはFirefoxのバージョン42まで私にとってはうまくいきませんでした。これはIE 10+、Edge、およびChromeで動作します。だから、

、IE 10+、エッジ、クローム、オペラと一緒に42歳以上のFirefoxをサポートするために、私はそれがMIME-タイプのカンマ区切りリストを使用することをお勧めだと思う：

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

[]エッジ動作：ファイルタイプフィルタのドロップダウンには、ここに記載されているファイルタイプが表示されますが、ドロップダウンではデフォルトではありません。デフォルトのフィルタは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 recommends著者は、MIME-タイプとaccept属性に対応する拡張子の両方を指定します。だから、最高アプローチがある：同じの

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

JSFiddle：here。

参考：List of MIME-types

重要：属性を受け入れて使用するだけで関心のない種類のファイルをフィルタリングする方法を提供します。ブラウザでは、ユーザーは任意の種類のファイルを選択できます。追加の（クライアント側の）チェックを行う必要があります（JavaScriptを使用して、1つの方法はthisとなります）。ファイルタイプがであることを確認しなければなりません。ファイル拡張子とバイナリ署名（ASP.NET、PHP、Ruby、Java）。ファイルタイプがthesetablesで、サーバータイプがより堅牢であることを確認するために、magic numbersを参照することもできます。

ファイルアップロードとセキュリティに関するthreegoodreadsです。

EDIT： HTML5ファイルAPIを使用してJavaScriptを使用するだけでなく、クライアントサイドでファイルタイプの確認を行うこともできますが、ファイルを確認する必要があります悪意のあるユーザーは依然としてカスタムHTTPリクエストを作成してファイルをアップロードすることができるためです。

Answer 2

はい、あなたは正しいです。 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> 

Answer 3

入力タグの受け入れ属性があります。しかし、それは決して信頼できません。 ブラウザは「提案」として扱います。つまり、ファイルマネージャによっては、希望のタイプのみを表示する事前選択があります。彼らは "すべてのファイル"を選択して、必要なファイルをアップロードすることができます。

例：

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

それが唯一の右のファイルを見つけるために、ユーザのための「ヘルプ」として使用されることに留意してくださいhtml5 spec

で続きを読みます。 すべてのユーザーは、あなたが望むすべてのリクエストをサーバーに送信できます。 常にサーバー側のすべてを検証する必要があります。

だから、答えは：あなたはを制限することはできませんが、あなたはが事前選択をを設定することはできますはがそれに頼ることができないありません。

また、JavaScriptを使用してファイル名（入力フィールドの値）をチェックすることで同様のことができますが、これは保護されておらず、ユーザーの選択を簡単にしないためナンセンスです。潜在的にウェブマスターに、自分が保護されていると思うように欺くだけで、セキュリティホールが開かれます。代わりのファイル拡張子（例えば、jpgの代わりにjpeg）、大文字、またはファイル拡張子はまったくありません（Linuxシステムでは一般的です）。

Answer 4

あなたは実際にjavascriptでそれを行うことができますが、jsがクライアント側であることを覚えているので、特定のタイプを避ける（制限または制限する）必要がある場合は、あなたはそれをサーバー側で行わなければなりません。

サーバー側の検証を開始したい場合はthis basic tutをご覧ください。チュートリアル全体については、this pageをご覧ください。

幸運を祈る！

Answer 5

技術的には、input要素のaccept attribute（html5の代替）を指定できますが、正しくサポートされていません。

Answer 6

changeイベントを使用して、ユーザーが選択した内容を監視し、その時点でファイルが受け入れられないことを通知できます。表示されるファイルの実際のリストを制限するものではありませんが、ほとんどサポートされていないaccept属性のほかに、クライアント側で最も近いものです。 http://www.jsfiddle.net/gaby/7br93/1/

Answer 7

で

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=''; 
    } 
}; 

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

検証に関しては、サーバー側で行う必要があります。私たちはjsのクライアント側でも行うことができますが、それは絶対的な解決策ではありません。サーバー側で検証する必要があります。

私は本当にstruts2 Java Webアプリケーション開発フレームワークを好みます。組み込みのファイルアップロード機能により、ファイルをstruts2ベースのWebアプリケーションにアップロードすることはケーキです。私たちのアプリケーションで受け入れたいファイル形式について言及してください。残りの部分は、フレームワーク自体のコアによって処理されます。あなたはstruts公式サイトでそれをチェックすることができます。

Answer 8

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

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; 
} 

Answer 9

使用inputタグ画像ファイルのみを選択する]をクリックしますhere for the latest browser compatibility table

ライブデモhere

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

属性acceptで、あなたはこのaccept="image/*"

を使用することができます

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

ライブデモhere

のみGIF、JPGとPNGが表示されます、Chromeバージョンから画面のグラブPHPで容易に可能で44の