2021.07.01
46번째 포스팅
입사 115일차.
오늘은 업로드하려는 파일에 대한 여러가지 validation을 알아보려고 한다.
확장자, 파일명 정규표현식 등을 체크하는 validation을 <script> 태그에 작성해보자.
1. html/jsp 태그 작성
① 파일을 업로드한 뒤에 엑셀파일의 데이터를 읽어오기 때문에 <form> 태그를 사용해서 파일을 jsp로 전달할 것이다.
※ 필수로 작성해야 하는 코드는 11, 14, 15, 18 라인입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="border: 1px solid #222;">
<form id="frm" method="POST" enctype="multipart/form-data">
<div style="padding: 10px;">
<div>
<input type="file" id="inputExcelFile" name="inputExcelFile" />
<button type="button" id="uploadBtn">jsp로 전달!</button>
</div>
</div>
</form>
</div>
</body>
</html>
|
cs |
② 완성된 View를 확인
2. 확장자 체크 스크립트
① 엑셀파일의 확장자인 .xls, .xlsx가 아니면 경고메세지를 표시한다.
② .split() 메소드를 사용해서 확장자만 받을 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function fn_xlsXlsxChk(fileName) {
// 문자열.split() 메소드는 문자열을 파라미터에 적은 문자로 구분하여 배열로 저장한다.
var tmp = fileName.split(".");
var extensionType = tmp[1];
// extensionType에 담은 확장자가 'xls' 또는 'xlsx'이면 true를 리턴. 아닐 경우 false를 리턴.
if( extensionType == "xls" ){
return true;
} else if( extensionType == "xlsx" ){
return true;
} else{
return false;
}
}
|
cs |
3. 파일명 정규표현식 스크립트
① 파일명에 영어, 숫자, 특수문자( . _ -) 를 제외한 문자가 포함되어 있으면 경고메세지를 표시한다.
② 정규표현식.test( 파일명 ) 메소드를 사용해서 정규표현식에 부합하는지 확인할 수 있다.
③ 정규표현식 관련 포스팅
[FE/JS] 정규표현식 정리
2021.04.15 20일차 입사 39일차. 일반적으로 정규표현식은 JS에서 처리한다. 전화번호나 주민번호, 사업자번호 등 숫자만을 입력하거나 ID나 PW에 특수문자를 제거하기 위해 사용한다. 매번 필요할때
limreus.tistory.com
|
1
2
3
4
5
6
7
8
9
|
function regularExpression( fileName ) {
// -, _, ., 숫자, 알파벳 소문자가 아니면 체크
var checkRegExp = /^[-_.0-9a-z]*$/;
// 2. 허용된 범위의 문자만 사용했다면 true를 리턴. 그 외의 문자를 사용했다면 false를 리턴.
if ( !checkRegExp.test( fileName ) ) return false;
else return true;
}
|
cs |
4. jsp로 전달하는 스크립트
① <form> 태그에 action속성을 입력해서 jsp로 <form> 태그 안의 value들을 전달한다.
② C:\Temp\ 라는 경로를 하드코딩한 후, 파일명을 뒤에 바꿔주는 방식으로 진행하기 때문에 파일명을 추가로 전달해야 한다.
|
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
|
function fn_chkNSubmit() {
// input type="file"의 value는 선택한 파일의 경로!
var filePath = $("#inputExcelFile").val();
// input type="file"의 파일명은 .files[0].name 메소드를 사용
var fileName = $("#inputExcelFile").files[0].name;
// 파일명 체크 스크립트
if ( !regularExpression( fileName ) ) {
alert("파일명을 확인!");
return false;
}
// 확장자 체크 스크립트
if ( !fn_xlsXslxChk( fileName ) ) {
alert("엑셀파일만 업로드 가능!");
return false;
}
// 파일명을 "." 으로 나눠서 확장자를 제외한 파일명만 저장
var tmp = fileName.split(".");
var justFileName = tmp[0];
// 파일명만 URI에 붙여서 URI를 완성한 후, action속성 추가 후 Submit!
$("#frm").attr("action", "jsp이름.jsp?justFileName=" + justFileName;
$("#frm").submit[0]();
}
|
cs |
5. 전송버튼을 누르면 스크립트가 실행되는 JQuery
① id="uploadBtn" 버튼을 클릭하면 fn_chkNSubmit() 스크립트가 실행된다.
② $(function() {}); JQuery는 페이지가 로드되는 순간 같이 로드된다.
③ 제일 먼저 로드되어야 하기 때문에, <script>태그 제일 상단에 작성해주는 것이 좋다.
|
1
2
3
4
5
|
$(function() {
$("#uploadBtn").click(function() {
fn_chkNSubmit();
});
});
|
cs |
다음포스팅의 주제
[BE/JAVA] JSP에서 엑셀파일 읽어서 DB에 저장하기 - 3
2021.07.03 48번째 포스팅 입사 117일차. 이제 jsp로 전달한 엑셀파일과 파일명을 사용해서 엑셀파일을 읽어올 수 있다. 파일을 업로드하는 코드는 다른 블로그에 더 자세하고 잘 설명되어있으니 엑
limreus.tistory.com
'백엔드 > 자바' 카테고리의 다른 글
| [BE/JAVA] HashMap clear() vs new HashMap<>() (0) | 2021.12.26 |
|---|---|
| [BE/JAVA] JSP에서 엑셀파일 읽어서 DB에 저장하기 - 3 (0) | 2021.07.03 |
| [BE/JAVA] JSP에서 엑셀파일 읽어서 DB에 저장하기 - 1 (0) | 2021.06.30 |
| [BE/JAVA] getter, setter Object vs parsing 속도비교 (0) | 2021.06.09 |
| [BE/JAVA] HashMap Synchronized 처리 (0) | 2021.04.14 |
댓글