web-dev-qa-db-ja.com

HTML <input type = 'file'>はフィルターを適用します

<input type='file' name='userFile'>

参照ボタンをクリックすると、参照ダイアログにすべてのファイルが表示されます...ファイルタイプをフィルタリングしたい場合は

  • 画像のみ、または。png＆。jpg＆。gifs
  • 。doc＆。docx＆。ppsのようなオフィスファイルのみ

どうやってするの...

htmlformsfilefilter
41
Moon

ファイル入力コントロールには「受け入れる」属性があり、必要なファイルのタイプを指定できます。 しかし、私が見ていることから、多くのブラウザはそれを無視するのが好きです-指定できるファイルタイプはMIMEタイプであるため、厳密に正しいブラウザは拡張子に関係なくすべてのファイルを見て、それが画像であるかどうかを確認する必要があります（そして、もしそうなら、それは何のタイプです）。

更新：Windowsのすべての主要ブラウザの少なくとも一部のバージョンが、accept属性の少なくとも一部のサポートを提供しているようです。 （Even IEはバージョン10の時点でサポートしています。）ただし、IE 8および9はまだドンそれをサポートしません。そして、一般的なサポートは少し不安定です。

  • Chromeは完全にサポートされているようです。独自のタイプの組み込みリストとシステムの...を使用するため、どちらかがタイプを定義している場合、Chromeはどのファイルを表示するかを知っています。
  • IE 10はファイル拡張子を美しくサポートし、MIMEタイプを適切にサポートしています。ただし、システムのMIMEタイプと拡張子のマッピングのみを使用しているようですが、これは基本的に、ユーザーのコンピューター上の何かがそれらの拡張子を正しいMIMEタイプで登録しなかった場合、IE wonそれらのMIMEタイプのファイルを表示しません。
  • Operaは、MIMEタイプのみをサポートしているようです（拡張機能が実際にフィルターを無効にしている点まで）。そのタイプのファイルを表示するには、タイプを選択する必要があります。
  • Firefoxは、限られたタイプのセットのみをサポートしているようで、他のタイプと拡張機能を無視します。
  • 私はSafariを持っていないので、ダウンロードする予定はありません。誰かがSafariのサポートを文書化できる場合... サファリの部分的なサポート。 http://caniuse.com/#search=accept

属性を追加することを検討する必要があります。これにより、それをサポートするブラウザーが、ユーザーが適切なファイルをより簡単に見つけるのに役立ちます。ただし、ファイルの選択後にファイル名を確認し、間違った拡張子のファイルがアップロードされた場合はエラーメッセージを表示することをお勧めします。

そしてもちろん、ファイルが正しいタイプであることをサーバーに必ず確認させてください。ファイル拡張子は単なる命名規則であり、簡単に覆すことができます。そして、たとえブラウザを信頼できたとしても（信頼できない場合）、そしてあなたが要求したようにフィルタリングを試みたとしても（そうではないかもしれませんが）、実際にその.docファイルは本当にWord文書であり、nilの次にあります。

35
cHao

私は、受け入れパラメーターを探していると思います。これを試してください

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

MIME_typeを使用する必要があります：たとえば

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

これは*.xlsxファイルタイプのみを受け入れます...

MIMEタイプのリストについては、以下のリンクを確認してください。
http://www.bitsandpix.com/entry/Microsoft-office-2007-2010-docx-xlsx-pptx-mime-type-to-avoid-the-Zip-issue/

10
JMnerd

選択できるファイルを制御することはできませんが、ファイルが選択された後にjavascriptでファイル名を読み取ることができます。その後、ファイルのタイプが間違っている場合、警告を表示したり、送信ボタンを無効にしたりできます。ただし、ファイルが本当に正しいタイプであるかどうかを伝えるために拡張子に頼ることはできないことを覚えておいてください。それは、そのファイルタイプをサポートしていないことに気付く前に、巨大なファイルのアップロードに時間を浪費するユーザーを支援する方法としてのみ扱われるべきです。

これを行うサンプルコードを次に示します。 jQueryを使用しますが、プレーンJavaScriptでも同じことができます。

$(function() {
    $('#inputId').change( function() {
        var filename = $(this).val();
        if ( ! /\.txt$/.test(filename)) {
            alert('Please select a text file');
        }
    });
});
6
stevemegson

JavaScriptを使用できます。 JavaScriptでこれを行う際の大きな問題は、入力ファイルをリセットすることであることを考慮してください。さて、これはJPGのみに制限されます（他の形式では mime type と magic number を変更する必要があります）：

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on('change', function(event) {
            var file = event.target.files[0];
            if(file.size>=2*1024*1024) {
                alert("JPG images of maximum 2MB");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            if(!file.type.match('image/jp.*')) {
                alert("only JPG images");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var int32View = new Uint8Array(e.target.result);
                //verify the magic number
                // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
                if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
                    alert("ok!");
                } else {
                    alert("only valid JPG images");
                    $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                    return;
                }
            };
            fileReader.readAsArrayBuffer(file);
        });
    });
</script>

FirefoxおよびChromeの最新バージョン、およびIExplore 10でテストされたことを考慮してください。

MIMEタイプの完全なリストについては、Wikipediaを参照してください 。

マジックナンバーの完全なリストについては、Wikipediaを参照 。

1
lmiguelmh

ファイルフィルタリングのほとんどの場合、クライアント側の検証を簡単に行う方法を作成しました。実際には非常に簡単です。さて、これを実装する前に、サーバーがこのファイルをチェックする必要があることを理解してください。なぜなら、誰かが.jsまたはHTMLを変更する場合、javascriptとHTMLフィルタリングは確実ではないからです。他の人が創造的な心を使って概念を実装するのを見るのが楽しいという事実のために、実際のスクリプトのすべてを含めていませんが、より良い答えを見つけるまでうまくいくように私がとったステップです：

入力を見つけて処理するjsオブジェクトを作成します。

AjaxControlToolKitのAsyncFileUploadコントロールのOnClientUploadCompleteなどの関数を呼び出します。

この関数内で、ブール変数を宣言します：bIsAccepted（falseに設定）および文字列sFileName（argsからファイル名を取得した後）。

If..elseステートメントで、

if(sFilename.indexOf(".(acceptedExtension1)") ||
   sFileName.indexOf(".(AcceptedExtension2)") )
{
   bIsAccepted = true;
}
else
{
   bIsAccepted = false;
}

それから

if(bIsAccepted)
{
//Process Data
}

サーバー上で、受け入れられたファイル拡張子のリストを設定し、ループスルーと処理を同様に行うと、プロセスが凝集して一貫したものになり、UIとCode-Behindがほぼすべての状況でファイルタイプをフィルタリングできます。

名前の一部として別のファイル拡張子を持つように名前を変更することでこれをバイパスできることを考えると、MIMEタイプは、さらに処理するためにサーバーに送信する前にチェックする必要があります。

            [http://www.webmaster-toolkit.com/mime-types.shtml][1]

お役に立てれば！

0
Brett Weber