html - 表示 - input type=file 設定
<input type="file">を使用する場合のファイル形式を制限しますか? (6)
HTMLの<input type="file">要素で<input type="file"> Browse]ボタンをクリックしたときに、ネイティブOSファイル・チューザから選択できるファイルのタイプを制限したいとします。 私はそれが不可能だと感じているが 、解決策があるかどうかを知りたい。 私はHTMLとJavaScriptだけを使いたいと思っています。 フラッシュはしないでください。
accept属性のinputタグを使用する
<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />
最新のブラウザ互換性テーブルについては、ここをクリックしてください
ライブデモはhere
イメージファイルのみを選択するには、このaccept="image/*"使用しますaccept="image/*"
<input type="file" name="my-image" id="image" accept="image/*" />
ライブデモはhere
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='';
}
};
はい、あなたは正しいです。 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>
以前の回答で述べたように、指定されたファイル形式だけのファイルを選択するようにユーザーを制限することはできません。 しかし、htmlのfile属性でacceptタグを使うのは本当に便利です。
検証に関しては、サーバー側で行う必要があります。 私たちはjsのクライアント側でも行うことができますが、それは絶対的な解決策ではありません。 サーバー側で検証する必要があります。
これらの要件のために、私はstruts2 Java Webアプリケーション開発フレームワークを本当に好んでいます。 組み込みのファイルアップロード機能により、ファイルをstruts2ベースのWebアプリケーションにアップロードすることはケーキです。 私たちのアプリケーションで受け入れたいファイル形式について言及してください。残りの部分は、フレームワーク自体のコアによって処理されます。 あなたはstruts公式サイトでそれをチェックすることができます。
厳密に言えば、答えはノーです。 開発者は 、ユーザーがネイティブOSファイル選択ダイアログボックスで任意のタイプまたは拡張子のファイルを選択できないようにすることはできません 。
しかし、 <input type = "file">のaccept属性は、OSのファイル選択ダイアログボックスにフィルタを提供するのに役立ちます。 例えば、
<!-- (IE 10+, Edge, Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />.xlsまたは.xlsx以外のファイルを除外する方法を提供する必要があります。 私の驚いたことに、これは、Firefoxのバージョン42まで私にとってはうまくいきませんでした。これはIE 10+、Edge、およびChromeで動作します。
したがって、IE 10以上、Edge、Chrome、Operaと一緒に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作者にaccept属性のMIMEタイプと対応する拡張子の両方を指定するrecommendsしています。 したがって、 最良のアプローチは次のとおりです。
<!-- 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 。
参照： MIMEタイプのリスト
重要： accept属性を使用すると、 重要ではないタイプのファイルを除外することができます。 ブラウザでは、ユーザーは任意の種類のファイルを選択できます。 追加の（クライアント側の）チェックを行う必要があります（JavaScriptを使用しますが、これには1つの方法がありthis ）。ファイル拡張子とそのバイナリ署名の両方を使用するMIMEタイプの組み合わせを使用して、 ASP.NET 、 PHP 、 Ruby 、 Java ）をRubyしていJava 。 また、ファイルタイプとそのマジックナンバーについて、 these tablesを参照して、より堅牢なサーバーサイド検証を実行することもできます。
ここでは、ファイルアップロードとセキュリティに関するthree good readsがあります。
編集： HTML5ファイルAPIを使用してJavaScriptを使用して（単に拡張子を調べるのではなく）クライアント側でバイナリ署名を使用したファイル形式の確認を行うこともできますが、悪意のあるためファイルをサーバーで検証する必要がありますユーザーは依然としてカスタムHTTPリクエストを作成してファイルをアップロードすることができます。
