파일을 전송하기 위한 조건 **가장 먼저는 파일을 업로드하기 위한 라이브러리르 추가해야만 한다. 1. <input type="file">인 속성을 기술해야만 파일 첨부가 가능. 2. <form enctype="multipart/form-data"method="post" > 반드시 method="post"이어야만 한다. 3. <form > 를 기술해주어야 한다.
a
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function addFileFnc(){
//document.getElementById("addFileBtn").previousSibling
//=>id가 addFileBtn인 태그의 바로 형 태그를 가져오기
//.getAttribute("name") =>위에서 가져온 input type="file" name="filename1"인
// 태그의 name속성값 가져오기 =>filename1
//.replace("filename","") => 위에서 가져온 filename1문자열에서 filename문자열값을""빈 문자열로 바꾸기
//최종으로 떼어온 값은 "1"이 되며 이것을 Number("1")을 이용하여 숫자값 1로 변경함.
//그 후로 +1일 더한 값을 fileAttr변수가 받는다.
let fileAttr = Number(document.getElementById("addFileBtn").previousSibling.getAttribute("name").replace("filename",""))+1;
//document.querySelectorAll("input[type=file]")[document.querySelectorAll("input[type=file]").length-1]
console.log("fileAttr : " + fileAttr); //2~5
//document.querySelectorAll("input[type=file]")=> input태그 중 type="file"인 태그들을 모두 배열로 가져옴.
//document.querySelectorAll("input[type=file]").length => 위에서 가져온 배열의 길이를 가져옴
let fileLength = document.querySelectorAll("input[type=file]").length;
console.log("fileLength : " + fileLength); //1~4
//.cloneNode(true) => 해당 태그 및 자식 노드까지 모두 복제하기
let btn = document.getElementById("addFileBtn").cloneNode(true);
console.log("btn : " + btn); //[object HTMLButtonElement]
// document.getElementById("addFileBtn")=>id가 addFileBtn인 버튼 태그를
// .remove(); => 해당 버튼 태그 및 자식 노트까지 모두 제거하기
document.getElementById("addFileBtn").remove(); //undefined
//document.getElementById("filesDiv").innerHTML 안의 자식요소를 html형식으로 먼저 가져 온 뒤
// 그 뒤에 '<p> 파 일 : <input type="file" name="filename' + (fileAttr)+'"><button type="button" id="addFileBtn" onclick="addFileFnc()">버튼추가</button></p>' 를 결합하기
// 위에 조합한 내용을 id가 fileDiv인 태그 안에 자식 태그로 html형식으로 넣기
let btn1 = document.getElementById("filesDiv").innerHTML += '<p> 파 일 : <input type="file" name="filename' + (fileAttr)+'"><button type="button" id="addFileBtn" onclick="addFileFnc()">버튼추가</button></p>';
console.log("btn1 : " + btn1);
//fileAttr값이 2일때 엘리먼트가 추가된 상태가 아니므로 fileLength의 갯수는 1임
//fileAttr값보다 filesLength의 갯수가 항상 1보다 작게 되므로, filesLength == 4 라는 조건으로 걸어준 것임.
if(fileLength == 4) document.getElementById("addFileBtn").remove();
}
let extArr = ["jpg","png","gif","jpeg","svg","bmp"];
window.onload = function(){
//이벤트 등록함수
//name속성의 값이 fileForm인 form태그에 submit이 실행되었을때 동작하는 이벤트 등록
fileForm.addEventListener('submit', function(e){
//lenTF => 파일을 5개까지 업로드만 가능하도록 제한할 때 사용할 변수
//extTF => 파일의 확장자를 [배열내 정의한 파일명]만 업로드 할 수 있도록 제한할 때 사용할 변수
let lenTF = false, extTF = false;
console.log("")
//document.querySelector("input[type=file]") Selector태그들 중 맨 처음 인덱스의 태그 한 개만 가져오기
//.files => 위 태그에 업로드한 파일의 목록을 {} 오브젝트 형식의 객체로 가져오기
let imgs = document.querySelector("input[type=file]").files;
console.log("img : "+ img);
//업로드한 파일들 중에서 확장자가 일치하는 파일의 갯수를 저장할 변수
let cnt = 0;
for(let i = 0 ; i < imgs.length; i++){
//imgs[i] => 내가 업로드한 이미지 파일 목록 중 i번째 인덱스에 해당되는 파일 가져오기
//.name => 위에서 가져온 이미지 파일의 파일명만 문자열로 가져오기
//.lastIndexOf(".") => 위에서 가져온 파일명 문자열에서 뒤에서 부터 체크하며 . 기호가 있는 곳을 찾아서
//해당 인덱스 번호 반환하기 (인덱스 번호는 왼쪽에서부터 세어올 것)
//.lastIndexOf(".")+1 => 위에서 가져온 인덱스 번호에 1을 더할 것
// ex)cute_dog.jpg=> [1~8]
//imgs[i].name.substring(위에서 가져온 9가 들어옴) => i번째 이미지파일문자열 중 9번인덱스부터
//마지막까지만 떼어오기 ex)cute_dog.jpg=> jpg
let extension = imgs[i].name.substring(imgs[i].name.lastIndexOf(".")+1);
//let extArr = ["jpg","png","gif","jpeg","svg","bmp"];
//위의 배열을 하나씩 돌려서 해당 요소값 을 하나씩 떼어와 obj에 담기
//obj값(위 배열에서 떼어온 한 개의 요소값)과 위에서 떼어온 확장자값이 일치하는지 체크하여 cnt증가시키기
//파일을 업로드한 갯수만큼 cnt가 생성되고, 이 값과 files.length의 값이 일치하면 모두
//업로드 가능한 확장자만 넣은 것이되고, 값이 다른 경우는 위의 extArr안의 확장자가 아닌 다른 확장자의
//파일이 올라온 것이 됨.(이미지 파일들만 업로드할 수 있도록 제한하기 위해 count세는 작업 처리)
extArr.forEach(function(obj){
if(obj == extension.toLowerCase()) cnt++;
});
}
//if문 => 허락되지 않은 확장자 파일이 올라온 경우. , else문 => 모두 허락된 확장자의 파일이 올라온 경우 실행됨
if(cnt != imgs.length) alert("이미지 파일만 업로드 하실 수 있습니다.");
else extTF = true;
//업로드한 이미지 파일의 갯수 세어오기(최대 5개의 파일까지만 업로드할 수 있도록 제한하기 위한 로직)
let fileLength = imgs.length;
//if문 => 파일을 5개 초과로 올릴 경우 실행, else문 => 파일을 5개 이하로 올릴 경우 실행됨.
if(fileLength > 5){
alert("파일은 최대 5개까지만 업로드 할 수 있습니다.");
} else {
lenTF = true;
}
//파일의 갯수가 5개를 초과하고, 파일의 확장자가 허락되지 않은 파일이 올라온 경우
//e.preventDefault() => action이 실행되지 못하도록 처리하기
if(!(lenTF && extTF)){
e.preventDefault();
}
});
};
</script>
</head>
<body>
<h2>MultipartRequest를 이용한 파일 업로드</h2>
<dl>
<dd>- cos.jar파일 필요: <a href="http://www.servlets.com/cos/">다운받기</a></dd>
</dl>
<form name="fileForm" method="post" enctype="multipart/form-data"
action="11_01_fileupload01_process.jsp">
<fieldset name="fld">
<legend>파일 업로드 폼</legend>
<p>이 름 : <input type="text" name="name"></p>
<p>제 목 : <input type="text" name="subject"></p>
<div id="filesDiv">
<!-- <p>파 일 : <input type="file" name="filename" multiple></p> -->
<p>파 일 : <input type="file" name="filename1"><button type="button" id="addFileBtn" onclick="addFileFnc()">버튼 추가</button></p>
</div>
<p><input type="submit" value="파일 올리기"></p>
</fieldset>
</form>
</body>
</html>
