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로 할 수있는 방법이 없다고 생각합니다. 대신 서버 측에서 확인해야합니다.

다음 이전 게시물에는 대안에 도움이 될 수있는 몇 가지 정보가 있습니다.

파일 입력 '수락'속성-유용합니까?

다음은 이미지 업로드 용 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> 

여기 변경 이벤트에서 먼저 이미지의 크기를 확인합니다. 그리고 두 번째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]);
};

<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"속성을 사용하는 것도 좋지만, 사용자가 제한없이 스크립트에 cURL 할 수 없도록 서버 측에서도 유효성을 검사해야합니다.

이미지가 아닌 파일을 버리고 사용자에게 경고하고 양식을 다시 표시하는 것이 좋습니다.

궁극적으로 찾아보기 창에 표시되는 필터는 브라우저에서 설정합니다. Accept 속성에서 원하는 모든 필터를 지정할 수 있지만 사용자의 브라우저가이를 준수 할 것이라는 보장은 없습니다.

가장 좋은 방법은 서버의 백엔드에서 일종의 필터링을 수행하는 것입니다.

Uploadify라는 프로젝트를 확인하십시오. http://www.uploadify.com/

Flash + jQuery 기반 파일 업 로더입니다. 이것은 파일 유형을 필터링하고 동시에 여러 파일을 선택하는 등의 기능을 제공하는 Flash의 파일 선택 대화 상자를 사용합니다.