web-dev-qa-db-ja.com

HTML：ファイルのアップロードを画像のみに制限する方法は？

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

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

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

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

215
Ms2ger

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

上記のコードを使用して、アップロードするファイルの種類をユーザーに制限することもできます。

78
Konga Raju

編集済み

物事が本来あるべきものであれば、「Accept」属性を介してこれを行うことができます。

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

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

次の古い投稿には、代替手段に役立つ情報が含まれています。

ファイル入力 'accept'属性-便利ですか？

6
David

これが画像アップロード用の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]);
};
5
Vineesh Puttanisseri

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

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

1
Robert K

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

最善の策は、サーバーのバックエンドで何らかのフィルタリングを行うことです。

0
John Lechowicz

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

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

0
AndrewR
<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ファイルであるかどうかを確認し、他のタイプのアップロードを制限します

0
Arun Prabhakaran P