자바스크립트 예제모음

파일 업로드 확장자 체크

전체 문자열 배열 폼관련
등록일 :

업로드 파일 확장자 체크하기

* 필요한 기능
- 자바스크립트로 파일을 업로드 하기전에 확장자를 체크한다.
- 특정 파일만 허용한다.
- 확장자 제한에 걸리면 선택한 파일은 무시한다.

아래에서 파일을 직접 선택해 보세요.
gif, jpg, png 파일이 아니면 경고창이 뜹니다.




HTML

<input type="file" name="file1" onchange="checkFile(this)"><br>
<input type="file" name="file2" onchange="checkFile(this)"><br>
<input type="file" name="file3" onchange="checkFile(this)"><br>

자바스크립트

function checkFile(f){

	// files 로 해당 파일 정보 얻기.
	var file = f.files;

	// file[0].name 은 파일명 입니다.
	// 정규식으로 확장자 체크
	if(!/\.(gif|jpg|jpeg|png)$/i.test(file[0].name)) alert('gif, jpg, png 파일만 선택해 주세요.\n\n현재 파일 : ' + file[0].name);

	// 체크를 통과했다면 종료.
	else return;

	// 체크에 걸리면 선택된  내용 취소 처리를 해야함.
	// 파일선택 폼의 내용은 스크립트로 컨트롤 할 수 없습니다.
	// 그래서 그냥 새로 폼을 새로 써주는 방식으로 초기화 합니다.
	// 이렇게 하면 간단 !?
	f.outerHTML = f.outerHTML;
}