web-dev-qa-db-ja.com

HTMLフォームのアップロードでの拡張機能のフィルター

シンプルなHTMLアップロードフォームがあり、デフォルトの拡張子（たとえば「* .drp」）を指定したい。これを行う方法は、入力タグのACCEPT属性を使用することであると読みましたが、どのように正確かはわかりません。

<form enctype="multipart/form-data" action="uploader.php" method="POST">
Upload DRP File:
<input name="Upload Saved Replay" type="file" accept="*.drp"/><br />
<input type="submit" value="Upload File" />
</form>

編集 Javascriptを使用して検証が可能であることは知っていますが、ユーザーにはポップアップダイアログに「.drp」ファイルのみが表示されるようにします。また、このアプリケーションでのサーバー側の検証についてはあまり気にしません。

htmlwebformsfile-upload
41
ripper234

「.drp」などの特定の形式の場合。それを直接accept = "。drp"に渡すと、それが機能します。

ただし、「*」なし

<input name="Upload Saved Replay" type="file" accept=".drp" />
<br/>
34
ParaMeterz

JavaScriptを使用してファイル拡張子を確認します。ここに私のコードがあります：

HTML

<input name="fileToUpload" type="file" onchange="check_file()" >

.. ..

javascript

function check_file(){
                str=document.getElementById('fileToUpload').value.toUpperCase();
        suffix=".JPG";
        suffix2=".JPEG";
        if(str.indexOf(suffix, str.length - suffix.length) == -1||
                       str.indexOf(suffix2, str.length - suffix2.length) == -1){
        alert('File type not allowed,\nAllowed file: *.jpg,*.jpeg');
            document.getElementById('fileToUpload').value='';
        }
    }
27
Nazri

Accept属性は、ファイルマスクではなくMIMEタイプを想定しています。たとえば、PNG画像を受け入れるには、accept = "image/png"が必要です。ブラウザがファイルタイプとみなすMIMEタイプを見つけ、それに応じて使用する必要があるかもしれません。ただし、「drp」ファイルは標準ではないため、might汎用MIMEタイプを受け入れる必要があります。

さらに、ほとんどのブラウザはこの属性を尊重しないようです。

ファイルのアップロードをフィルタリングするより良い方法は、サーバー側になります。たまに間違ったファイルを選択したことを知るためだけにユーザーがファイルをアップロードするのに時間を浪費するかもしれないので、これは不便です。

または、フォームを送信する前にJavaScriptで簡単なチェックを行うこともできます。ファイルフィールドの値の拡張子をチェックして、「。drp」かどうかを確認します。これはおそらく、accept属性よりもはるかにサポートされるでしょう。

10
Brian Cline

CMSが指摘しているように、ほとんどのブラウザーはこの属性を無視するため、この属性は使用しません。

必ずクライアント側の検証を使用しますが、サーバー側と組み合わせてのみ使用してください。クライアント側の検証はすべて実行できます。

トピックから少し外れていますが、アップロードされたファイルを検証するためにコンテンツタイプをチェックする人もいます。攻撃者は簡単に変更して、たとえばphpファイルをアップロードできるため、この点に注意する必要があります。次の例を参照してください： http://www.scanit.be/uploads/php-file-upload.pdf

1
alexmac

JavaScriptを使用して実行できます。送信関数でフォームフィールドの値を取得し、拡張機能を解析します。

次のようなものから始めることができます：

<form name="someform"enctype="multipart/form-data" action="uploader.php" method="POST">
<input type=file name="file1" />
<input type=button onclick="val()" value="xxxx" />
</form>
<script>
function val() {
    alert(document.someform.file1.value)
}
</script>

私はalexmacに同意します-サーバー側でも同様です。

1
Diodeus - James MacFarlane

Accept属性は、フォームのターゲットが正しく処理するコンテンツタイプ（MIMEタイプ）のコンマ区切りリストを指定します。残念ながら、この属性はすべての主要なブラウザーで無視されるため、ブラウザーのファイルダイアログにはまったく影響しません。

0
John Topley