Programming language/Javascript,jQuery

[Javascript]파일 확장자 체크하기

웹 프로젝트를 하면 주로 게시판을 만드는 것이 첫 걸음이 된다.

파일 확장자 체크를 알아두면 자유게시판을 만들 때 업로드할 수 있는 이미지 파일 확장자를 제한할 수 있다.

이미지 파일의 확장자를 구하는 것 역시 자바스크립트를 이용하면 어렵지 않다.

아래의 코드를 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<%@page language="java" contentType="text/html; charset=euc-kr"%>
 
<html>
<head>
<title>이미지 구하기</title>
 
<script>
function imgCheck(img)
{
    alert(img);    
    frm.preview.src = "";
 
    frm.preview.src = img;
    
    var preview = document.getElementById('preview'); 
    var width = preview.clientWidth;
    var height = preview.clientHeight;
 
    alert("width : " + width + " | height : " + height);
    /* 이미지 파일 형식 처리 */
    var imgHeader = img.lastIndexOf("\\");
    var imgMiddle = img.lastIndexOf(".");      
    var imgName = img.substring(imgHeader+1, imgMiddle);
  
    var filepoint = img.substring(imgMiddle+1,img.length);
    var imgtype = filepoint.toLowerCase();
    alert(imgHeader +"/"+ imgMiddle +"/"+ imgName + "/" + imgtype);
    
    if ( imgtype != "jpg" ){
        frm.preview.src = "";
        alert("사진은 jpg 파일만 업로드할 수 있습니다.");
 
        return;
    }
}
 
</script>
 
</head>
<body>
<form id="frm">
 
<div>TISTORY</div>
 
<img src="" border="0" name="preview" id="preview" ><br> 
<input type="file" name="IMG_FILE" id="IMG_FILE" onchange="imgCheck(this.value)" >
 
</form>
</body>
</html>
Colored by Color Scripter
cs

원리는 간단하다. 파일의 확장자를 구할 때 lastIndexOf 함수를 사용해 문자열 중 가장 마지막으로 나오는 문자열의 인덱스를 반환한다.

var imgMiddle = img.lastIndexOf(".");

그럼 위와 같이 파일의 값을 읽어들여 문자열 "."이 가장 마지막에 오는 인덱스 번호를 얻게 된다. 즉, 이 인덱스 번호부터 문자열의 길이까지가 파일의 확장자가 되는 것이다.

인덱스 번호를 확인해보자. 두번째의 숫자가 해당 인덱스 번호이다.

37부터 문자열의 길이까지 문자열을 잘라서 추출해보면 파일 확장자에 해당하는값이 나온다.

(+소문자로 반환해주기 위해 toLowerCase() 함수 사용)

var filepoint = img.substring(imgMiddle+1,img.length);

var imgtype = filepoint.toLowerCase();

그럼 이제 제어문으로 프로그램 흐름을 제어해보자.

if ( imgtype != "jpg" ){

        frm.preview.src = "";

        alert("사진은 jpg 파일만 업로드할 수 있습니다.");

        return;

}

frm.preview.src = ""; ☞ jpg 파일이 아닐 경우 프리뷰 이미지를 초기화시켜줬다.

+ 피드백은 언제나 환영입니다 :)

저작자표시 비영리 변경금지

'Programming language > Javascript,jQuery' 카테고리의 다른 글

[jQuery]Ajax 예제 (16)	2018.10.28
fullpage.js 사용법 (2)	2018.09.10
[Javascript]이미지 크기 구하기 (4)	2018.08.31
DOM(Document Object Model) (0)	2018.08.21
[Javascript]div modal창 만들기 (0)	2018.06.26

Contents

새소식

[Javascript]파일 확장자 체크하기

'Programming language > Javascript,jQuery' 카테고리의 다른 글

연관 포스팅

티스토리툴바