파일첨부에 이미지만 첨부할 수 있도록 처리 input file

form 을 이용해서 파일을 전송할때 이미지 파일만 전송처리

파일첨부 <input type="file"> 을 통해서 저장시 전송이후 서버스크립트로 처리하는 방법은 많이 존재 하지만 전송전에 체크하는 방법은 많이 않아 정리해둔다.

 

첫번째 최근 브라우져 ie10 이후 지원 되는 방법

 

<input type="file" name="filename" accept="image/gif, image/jpeg, image/png" />

 

accept 로 사용하게 되면 파일찾기 클릭해서 탐색창이 나올때 이미지 외에 파일은 보이지 않는다.

다만 "사용자 지정 파일" 로 되어있는 부분을 "모든 파일" 로 수정하면 이미지 파일뿐 아니라 모든 파일이 보이게되 막을수가 없게 된다.

 

하지만 이 방법만으로도 일반인들에게는 많은 효과를 걷을수있을것이다.

 

 

추가로 할 수 있는 방법은 javascript 를 사용해서 막는 방법이다.

<script type="text/javascript">

function fileCheck(obj) {
    pathpoint = obj.value.lastIndexOf('.');
    filepoint = obj.value.substring(pathpoint+1,obj.length);
    filetype = filepoint.toLowerCase();
    if(filetype=='jpg' || filetype=='gif' || filetype=='png' || filetype=='jpeg' || filetype=='bmp') {

        // 정상적인 이미지 확장자 파일일 경우 ...

    } else {
        alert('이미지 파일만 선택할 수 있습니다.');

        parentObj  = obj.parentNode
        node = parentObj.replaceChild(obj.cloneNode(true),obj);

        return false;
    }
    if(filetype=='bmp') {
        upload = confirm('BMP 파일은 웹상에서 사용하기엔 적절한 이미지 포맷이 아닙니다.\n그래도 계속 하시겠습니까?');
        if(!upload) return false;
    }
}

</script>

 

<input type="file" name="filename" onchange="fileCheck(this)" accept="image/gif, image/jpeg, image/png"/>

두가지 방법을 다 사용하는것이 더 효과적일 것이다.