input 태그 file 속성으로 파일 업로드할 때 특정 확장자만 업로드하도록 제한하는 법

웹 페이지에 파일 업로드 기능을 넣을 때면 흔히 '<input type="file">'을 이용하게 됩니다.

이때, accept 속성을 이용하면 업로드할 파일의 확장자를 제한할 수 있습니다.

예를 들어서 jpg파일만 업로드 하고 싶다.

'<input type="file" accept=".jpg">'라고 쓰면됩니다.

만약 여러 확장자를 쓰고 싶다면 아래와 같이 쓰시면됩니다.

'<input type="file" accept=".jpg,.pdf">'

이렇게 하면 최신 브라우져에서는 확장자 제한을 걸어둔채로 업로드가 가능할 겁니다.

.

.

.

하지만, 우리의 IE8 이하의 브라우져에서는 위의 방법이 통용되지 않습니다.

그래서 방법을 찾다가.. 답답해서 함수 하나 만들었습니다.

________________________________________________________________________________________

function filechk(){

var fileDir="확장자를 포함한 파일명";

if(fileDir.substring(fileDir.lastIndexOf(".")+1,fileDir.length).search("확장자명") == -1){

alert("지정된 확장자의 파일만 업로드 가능합니다!");

}

}

-----------------------------------------------------------------------------------------

위의 함수를 이용하면 됩니다.

원리는 간단합니다.

업로드할 파일명에서 '.'을 찾고, 거기부터 파일의 마지막 글자까지를 추출하여, 내가 원하는 확장자가 맞는지 확인하고, 그게 아니면 경고창을 띄워주는 원리입니다.

(검색하지 말고 진작에 이거나 만들껄 그랬습니다..)

p.s : 사실 저 함수를 만들면서, 제한된 확장자가 아닌 파일을 업로드시도 할 경우, '<input type="file">'의 value값을 지우려고 했는데, 아무리해도 지워지지 않았습니다. 그래서 확인해보니, 보안상 file타입의 value값은 바꿀수 없다고 합니다.(만약 그게 가능하다면 임의로 사용자의 파일을 갈췌하여 무단 업로드할 수도 있을테니까요.) 이 점도 참고하세요~