HTML：ファイルのアップロードを画像のみに制限するにはどうすればよいですか？

HTMLで、アップロードできるファイルの種類を制限するにはどうすればよいですか？

ユーザーエクスペリエンスを簡単にするために、ファイルのアップロードを画像（jpeg、gif、png）のみに制限します。

<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>

HTML5は言う<input type="file" accept="image/*">。もちろん、クライアント側の検証は絶対に信頼しないでください。常にサーバー側で再度確認してください...

HTML5ファイルの入力には、accept属性と複数の属性があります。複数の属性を使用することにより、インスタンスで複数の画像をアップロードできます。

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

複数のMIMEタイプを制限することもできます。

<input type="file" multiple accept='image/*|audio/*|video/*' >

ファイルオブジェクトを使用してMIMEタイプをチェックする別の方法。

ファイルオブジェクトは名前、サイズ、タイプを提供します。

var files=e.target.files;

var mimeType=files[0].type; // You can get the mime type

上記のコードにより、アップロードするファイルタイプのユーザーを制限することもできます。

編集済み

本来の状態である場合は、「Accept」属性を使用してこれを行うことができます。

http://www.webmasterworld.com/forum21/6310.htm

ただし、ブラウザはこれをほとんど無視するため、これは無関係です。簡単に言えば、HTMLでそれを行う方法はないと思います。代わりにサーバー側で確認する必要があります。

次の古い投稿には、別の方法で役立つ情報がいくつかあります。

ファイル入力の 'accept'属性-役に立ちますか？

画像アップロード用のHTMLは次のとおりです。デフォルトでは画像ファイルはブラウザウィンドウにのみ表示されますaccept="image/*"。しかし、それでもドロップダウンから変更でき、すべてのファイルが表示されます。そのため、JavaScriptパーツは、選択されたファイルが実際の画像であるかどうかを検証します。

 <div class="col-sm-8 img-upload-section">
     <input name="image3" type="file" accept="image/*" id="menu_images"/>
     <img id="menu_image" class="preview_img" />
     <input type="submit" value="Submit" />
 </div> 

ここで変更イベントでは、まず画像のサイズを確認します。そして2番目にif条件では、画像ファイルかどうかを確認します。

this.files[0].type.indexOf("image")なり-1、それが画像ファイルではない場合。

document.getElementById("menu_images").onchange = function () {
    var reader = new FileReader();
    if(this.files[0].size>528385){
        alert("Image Size should not be greater than 500Kb");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();     
        return false;
    }
    if(this.files[0].type.indexOf("image")==-1){
        alert("Invalid Type");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();         
        return false;
    }   
    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("menu_image").src = e.target.result;
        $("#menu_image").show(); 
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

これはサーバー側でのみ安全に実行できます。「accept」属性の使用は適切ですが、ユーザーがその制限なしにスクリプトにcURLできるようにするには、サーバー側でも検証する必要があります。

非画像ファイルを破棄し、ユーザーに警告して、フォームを再表示することをお勧めします。

<script>

    function chng()
    {
        var typ=document.getElementById("fiile").value;
        var res = typ.match(".jp");

        if(res)
        {
            alert("sucess");
        }
        else
        {
            alert("Sorry only jpeg images are accepted");
            document.getElementById("fiile").value="; //clear the uploaded file
        }
    }

</script>

今html部分に

<input type="file" onchange="chng()">

このコードは、アップロードされたファイルがjpgファイルかどうかをチェックし、他のタイプのアップロードを制限します

最終的に、「参照」ウィンドウに表示されるフィルターは、ブラウザーによって設定されます。必要なすべてのフィルターをAccept属性で指定できますが、ユーザーのブラウザーがそれを遵守する保証はありません。

あなたの最善の策は、サーバーのバックエンドである種のフィルタリングを行うことです。

Uploadifyというプロジェクトをチェックアウトします。http://www.uploadify.com/

これは、Flash + jQueryベースのファイルアップローダーです。これは、Flashのファイル選択ダイアログを使用して、ファイルタイプのフィルタリング、複数のファイルの同時選択などを行うことができます。