webtest/pdsTest/mUpLoad.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mUpLoad.jsp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
function fCheck() {
var fname = myform.file1.value;
var ext = fname.substring(fname.lastIndexOf(".")+1);
var uExt = ext.toUpperCase();
var maxSize = 1024 * 1024 * 10; // 최대 10Mbte
//var fname3 = myform.file3.value;
//var ext3 = fname3.substring(fname3.lastIndexOf(".")+1);
//var fileSize3 = document.getElementById("file3").files[2].size;
//var uExt3 = ext3.toUpperCase();
// 첫번째파일처리
if(fname=="") {
alert("업로드할 파일을 선택하세요!");
return false;
}
var fileSize = document.getElementById("file1").files[0].size;
if(uExt != "ZIP" && uExt != "JPG" && uExt != "JPEG" && uExt != "HWP" && uExt != "PNG") {
alert("업로드 가능파일은 'zip/jpg/jpeg/hwp'파일만 가능합니다.");
return false;
}
else if(fname.indexOf(" ") != -1) {
alert("파일명 안에는 공백을 포함할 수 없습니다.");
return false;
}
else if(fileSize > maxSize) {
alert("업로드 파일의 최대용량은 10MByte까지 입니다.");
return false;
}
// 두번째 파일 처리
fname = myform.file2.value;
if(fname!="") {
fileSize = document.getElementById("file2").files[0].size;
ext = fname.substring(fname.lastIndexOf(".")+1);
uExt = ext.toUpperCase();
if(uExt != "ZIP" && uExt != "JPG" && uExt != "JPEG" && uExt != "HWP" && uExt != "PNG") {
alert("업로드 가능파일은 'zip/jpg/jpeg/hwp'파일만 가능합니다.");
return false;
}
else if(fname.indexOf(" ") != -1) {
alert("파일명 안에는 공백을 포함할 수 없습니다.");
return false;
}
else if(fileSize > maxSize) {
alert("업로드 파일의 최대용량은 10MByte까지 입니다.");
return false;
}
}
// 세번째 파일
fname = myform.file3.value;
if(fname!="") {
fileSize = document.getElementById("file3").files[0].size;
ext = fname.substring(fname.lastIndexOf(".")+1);
uExt = ext.toUpperCase();
if(uExt != "ZIP" && uExt != "JPG" && uExt != "JPEG" && uExt != "HWP" && uExt != "PNG") {
alert("업로드 가능파일은 'zip/jpg/jpeg/hwp'파일만 가능합니다.");
return false;
}
else if(fname.indexOf(" ") != -1) {
alert("파일명 안에는 공백을 포함할 수 없습니다.");
return false;
}
else if(fileSize > maxSize) {
alert("업로드 파일의 최대용량은 10MByte까지 입니다.");
return false;
}
}
myform.submit();
}
</script>
</head>
<body>
<p><br/></p>
<div class="container">
<h2>멀티파일 업로드 폼</h2>
<p><br/></p>
<form name="myform" method="post" action="PdsMUpLoadOk.pd" enctype="Multipart/form-data">
<div class="form-group">
파일 :
<input type="file" name="file1" id="file1" class="form-control-file border"/>
<input type="file" name="file2" id="file2" class="form-control-file border"/>
<input type="file" name="file3" id="file3" class="form-control-file border"/>
<input type="button" value="파일올리기" class="btn btn-success" onclick="fCheck()"/>
<input type="reset" value="다시검색" class="btn btn-success"/>
<input type="button" value="다운로드 폼으로" class="btn btn-success" onclick="location.href='PdsMDownLoad.pd'"/>
</div>
<p><br/></p>
<!-- <p>[<a href="PdsMDownLoad.pd">다운로드 폼으로 이동하기</a>]</p> -->
</form>
</div>
</body>
</html>
멀티파일업로드는 말 그대로 여러파일을 동시에 올릴 수 있도록 처리한 것이다.
위 이미지 싱글파일업로드 , 멀티파일업로드를 비교해보면 이해하기 쉽다.
부트스트랩을 사용하기 위해 스크립트 작성 부분
여기서부터는 upLoadTest.jsp 와 내용이 비슷하다 . 단지 다중파일을 업로드하는 부분이 다를뿐이다.
자바스크립트 처리부분
각각 변수에 담음
fname = 파일명 - fname 담음
ext = 추출한 확장자 - 마지막점을 기준으로 뒤에 있는 문자를 추출 해서 ext 변수에 담음
lastIndexOf(".") 를 사용해서 뒤에서부터 . 을 만날때 까지 위치를 추출한다.
substring으로 나온 위치를 기점으로 확장자를 추출한다.
uExt = 대문자로 변환한 확장자 - ext.toUpperCase(); 추출한 확장자 대문자로 변환 해서 uExt 에 담음
maxSize = 사이즈 1024* 1024 * 10 = 10MB [ 최대 업로드 용량 제한을 설정 ] maxSize 변수 담음
파일처리 부분 이렇게 3번을 처리함 [3 개의 파일을 동시에 올리기 위해 ]
이 프로그램에서는 첫번째 파일을 올리지않으면 두번째 , 세번째 파일 만 올리지 못하도록 구현
[첫번째 파일은 무조건 선택이 되어있어야 함께 올려야 멀티 업로드가 가능 ]
파일명이 공백일때 -> 업로드 파일 선택하세요
업로드할 파일의 사이즈 구함 ("file1"). files 는 메소드 은 아래에 form태그의 id와 동일하게 작성
ZIP 파일이 아니거나 JPG 가 아니거나 TXT 가 아니거나 HWP , PNG가 아니면
[업로드 기능파일 'zip jpg txt hwp 만 가능합니다 '] 메시지 출력
파일명 공백 처리 indexOf 는 문자를 찾을수 없을때 -1 을 반환
문자을 찾을 수 없을 때 -1을 반환
즉 (fname.indexOf(" ") != -1)
[공백]를 찾지못한게 아니면 == 즉 공백을 찾았으면
파일사이즈가 최대파일사이즈보다크면 메시지 띄움
뒷부분 추후에 추가
'Web > Spring , Springboot , JPA' 카테고리의 다른 글
| [ajax] 알아보기 (0) | 2020.05.26 |
|---|---|
| 파일 자료실 -[멀티파일업로드구현]mUpLoadOk.jsp (0) | 2020.05.23 |
| 파일 자료실 - downLoadOK.jsp (0) | 2020.05.22 |
| 파일 자료실 downLoad.jsp (0) | 2020.05.22 |
| 파일 자료실 - 개념 설명 (0) | 2020.05.20 |
