JSP - eclipse

최성현·2023년 8월 7일

JSP

목록 보기

6/13

업로드를 실행시켜줄 파일들

이미지 담을 가상의 폴더

Fileupload1

form

필수추가

cos.jar/method=post/enctype="multipart/form-data" 는 업로드 도우미 역할로 필요한 파일

pc에 있는 다른 이미지를 가져와서 업로드 하는 것 / enctype은 fileupload에서 필수

<form action="uploadAction.jsp" method="post" enctype="multipart/form-data">

action

경로

save파일에는 업로드 되지 않고 실제 업로드 되는 경로

/Users/sunghyunchoi/Desktop/sist0615/work/jspwork/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/JspProject/save

//파일이 저장되는 실제 경로 구하기
ServletContext context=getServletContext();
String realFolder=context.getRealPath("/save");

//이미지 확인/변수 realFolder의 실제 경로가 콘솔창에 나온다
System.out.println(realFolder);

사이즈 배정

10241024숫자 - 숫자에 어느정도의 값을 넣냐에 따라 크기 배정

//사이즈 어떻게 줄 것인가
int fileSize=1024*1024*5; //5mb

try/catch 벗어나기

try catch에 갇히면 변수 사용 못하기 때문에 null로 먼저 생성해주는 것

MultipartRequest multi=null;

DefaultFileRenamePolicy

파일이 같은 이름이면 자동으로 번호를 매겨줌

multi

이건 file에 관한 것이라 try/catch해줘야함

multi=new MultipartRequest(request,realFolder,fileSize,"utf-8",new DefaultFileRenamePolicy());

여기 있는 모든 name들은 모두 multi.parameter로 받는다

String name=multi.getParameter("name");
String title=multi.getParameter("title");

getFilesystemName(name) : 실제 업로드된 파일명(동일한이름일경우 변경된 이름반환)//이미지 단독으로1개 받는것

String uploadFileName=multi.getFilesystemName("uploadFile");
String originalFileName=multi.getOriginalFileName("uploadFile");

html문 출력 창

위에 multi=new MultipartRequest부터 끝까지 try/catch
try/catch는 오류방지를 위한 것
try/catch된 파일 관련된 변수도 쓰기 위해서

%>
			
			<table class="table table-bordered" style="width: 300px;">
				<tr>
					<th>이름</th>
					<td><%=name %></td>
				</tr>
				
				<tr>
					<th>제목</th>
					<td><%=title %></td>
				</tr>
				
				<tr>
					<%-- 가상의 폴더를 만들어야 넣어줄 수 있음 --%>
					<th>업로드 파일명</th>
					<td><img src="../save/<%=uploadFileName%>"></td>
				</tr>
				
				<tr>
					<th>업로드 파일명</th>
					<%-- 실제 이름이 뭔지 확인 --%>
					<td><%=originalFileName %></td>
				</tr>
				
				<tr>
					<td>
						<input type="button" value="업로드 다시 하기" onclick="location.href='uploadForm.jsp'">
					</td>
				</tr>
			</table>
			
			
		<%}catch(Exception e){
			
		}
%>

uploadForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<%-- cos.jar/method=post/enctype="multipart/form-data" 는 업로드 도우미 역할로 필요한 파일 --%>
	<%-- pc에 있는 다른 이미지를 가져와서 업로드 하는 것 / enctype은 fileupload에서 필수 --%>
	<form action="uploadAction.jsp" method="post" enctype="multipart/form-data">
		<table class="table table-bordered" style="width: 500px;">
			<tr>
				<th width="100">이름</th>
				<td>
					<input type="text" name="name" class="form-control"
					style="width: 150px;">
				</td>
			</tr>
			
			<tr>
				<th width="100">제목</th>
				<td>
					<input type="text" name="title" class="form-control"
					style="width: 350px;">
				</td>
			</tr>
			
			<tr>
				<th width="100">파일</th>
				<td>
					<input type="file" name="uploadFile">
				</td>
			</tr>
			
			<tr>
				<td colspan="2" align="center">
					<button type="submit" class="btn btn-success">업로드</button>
				</td>
			</tr>
		</table>
		
		<%-- save파일에는 업로드 되지 않고 실제 업로드 되는 경로
		/Users/sunghyunchoi/Desktop/sist0615/work/jspwork/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/JspProject/save --%>
	</form>
</body>
</html>

uploadAction.jsp

<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<%
		//파일이 저장되는 실제 경로 구하기
		ServletContext context=getServletContext();
		String realFolder=context.getRealPath("/save");
		
		//이미지 확인
		System.out.println(realFolder);
		
		//사이즈 어떻게 줄 것인가
		int fileSize=1024*1024*5; //5mb
		
		MultipartRequest multi=null; //try catch에 갇히면 변수 사용 못하기 때문에 null로 먼저 생성해주는 것
		
		try{
		//new DefaultFileRenamePolicy() 같은 이름이 들어가면 자동으로 번호를 매겨줌
		//이건 file에 관한 것이라 try/catch해줘야함
		multi=new MultipartRequest(request,realFolder,fileSize,"utf-8",new DefaultFileRenamePolicy());
				
		//여기 있는 모든 name들은 모두 multi.parameter로 받는다
		String name=multi.getParameter("name");
		String title=multi.getParameter("title");
				
		//getFilesystemName(name) : 실제 업로드된 파일명(동일한이름일경우 변경된 이름반환)//이미지 단독으로1개 받는것
		String uploadFileName=multi.getFilesystemName("uploadFile");
		String originalFileName=multi.getOriginalFileName("uploadFile");
				
		%>
			
			<table class="table table-bordered" style="width: 300px;">
				<tr>
					<th>이름</th>
					<td><%=name %></td>
				</tr>
				
				<tr>
					<th>제목</th>
					<td><%=title %></td>
				</tr>
				
				<tr>
					<%-- 가상의 폴더를 만들어야 넣어줄 수 있음 --%>
					<th>업로드 파일명</th>
					<td><img src="../save/<%=uploadFileName%>"></td>
				</tr>
				
				<tr>
					<th>업로드 파일명</th>
					<%-- 실제 이름이 뭔지 확인 --%>
					<td><%=originalFileName %></td>
				</tr>
				
				<tr>
					<td>
						<input type="button" value="업로드 다시 하기" onclick="location.href='uploadForm.jsp'">
					</td>
				</tr>
			</table>
			
			
		<%}catch(Exception e){
			
		}
	%>
</body>
</html>

Fileupload2

form

form자체가 multipart 업로드할 경로/ 업로드할 파일의 크기 등 처리해줌

이미지 업로드

이미지 업로드 버튼이라 필수

<tr>
	<%-- 이미지 업로드 필수 코드 --%>
	<th>이미지 업로드</th>
	<td>
		<input type="file" name="uFile" class="form-control">
	</td>
</tr>

Action(Process약자로 Proc)

가상의 폴더 생성 후 작성...업로드할 경로

ServletContext context=getServletContext();
//가상의 폴더를 써준다...업로드할 경로
String realFolder=context.getRealPath("/upload");

생성자

생성자 (request,fileDirectory(업로드할 경로),1024*5(업로드할 파일의 크기),
"utf-8"(한글타입) , new DefaultFileRenamePolicy() <-같은이름이 있을경우
다른이름으로 저장 )

//생성자
MultipartRequest multi=null;

try/catch - 자바문

multi.getParameter("") -"" 안 값은 form에 있는 name값

String originalFileName=multi.getOriginalFileName("uFile"); -> uFile의 진짜이름
->파일자체의 진짜 이름

try{
	multi=new MultipartRequest(request,realFolder,filesize,"utf-8",new DefaultFileRenamePolicy());
	
	//form에 있는 name과 ""안 이름이 같아야함
	String writer=multi.getParameter("writer");
	String subject=multi.getParameter("subject");
	String uploadName=multi.getFilesystemName("uFile");
	//uFile의 진짜이름
	String originalFileName=multi.getOriginalFileName("uFile");
	%>

try/catch - html문

업로드 파일명은 같은 이름이 있으면 생산자의 DefaultFileRenamePolicy()로 임의의 이름으로 바뀐다
그것을 표현해준 구문

<tr>
	<th>업로드파일명</th>
	<%-- 프로젝트 내 파일 경로 --%>
	<td><img src="../upload/<%=uploadName%>" style="width: 100px;">
    </td>
</tr>

원래파일명 - 원본파일명
업로드 할때 찾아온 원본 파일명을 표현해준 구문

<tr>
			<th>원래파일명</th>
			<td><%=originalFileName %></td>
		</tr>

에러구문
업로드시 나오는 오류 구문을 콘솔창에 표현해줌

<%}catch(Exception e){
		//업로드 오류 보여주는 문구
		System.out.println("업로드 오류: "+e.getMessage());
	}
//브라우저로 업로드하면 콘솔창에 저장된 경로가 나와서 이동하면 파일 업로드 된 것을 확인 가능

<table class="table" style="width: 300px;">
		<tr>
			<th>글쓴이</th>
			<td><%=writer %></td>
		</tr>
		<tr>
			<th>제목</th>
			<td><%=subject %></td>
		</tr>
		<tr>
			<th>업로드파일명</th>
			<%-- 프로젝트 내 파일 경로 --%>
			<td><img src="../upload/<%=uploadName%>" style="width: 100px;"></td>
		</tr>
		<tr>
			<th>원래파일명</th>
			<td><%=originalFileName %></td>
		</tr>
		
		<tr>
			<td colspan="2" align="center">
				<input type="button" value="다시업로드"
				onclick="location.href='uploadForm.jsp'">
			</td>
		</tr>
	</table>	
	
	
	<%}catch(Exception e){
		//업로드 오류 보여주는 문구
		System.out.println("업로드 오류: "+e.getMessage());
	}
	//브라우저로 업로드하면 콘솔창에 저장된 경로가 나와서 이동하면 파일 업로드 된 것을 확인 가능
%>
</body>
</html>

uploadForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<%-- form자체가 multipart 업로드할 경로/ 업로드할 파일의 크기 등 처리해줌 --%>
	<form action="uploadProc.jsp" method="post" enctype="multipart/form-data">
		<table class="table table-bordered" style="width: 500px">
			<tr>
				<th>글쓴이</th>
				<td>
					<input type="text" name="writer" class="form-control"
					style="width: 150px;">
				</td>
			</tr>
			
			<tr>
				<th>주제</th>
				<td>
					<input type="text" name="subject" class="form-control"
					style="width: 350px;">
				</td>
			</tr>
			
			<tr>
				<%-- 이미지 업로드 필수 코드 --%>
				<th>이미지 업로드</th>
				<td>
					<input type="file" name="uFile" class="form-control">
				</td>
			</tr>
			
			<tr>
				<td colspan="2" align="center">
					<input type="submit" value="업로드" class="btn btn-success" style="width: 150px;">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

uploadProc.jsp

<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	ServletContext context=getServletContext();
	//가상의 폴더를 써준다...업로드할 경로
	String realFolder=context.getRealPath("/upload");
	
	//realFolder가 생성자단에 들어가야함
	System.out.println(realFolder);
	
	int filesize=1024*1024*3; //3mb 맨 뒤 숫자로 몇 메가일지 결정
	
	//생성자
	MultipartRequest multi=null;
	
	//MultipartRequest 라는 클래스를 사용 생성자 (request,fileDirectory(업로드할 경로),1024*5(업로드할 파일의 크기),
	//"utf-8"(한글타입) , new DefaultFileRenamePolicy() <-같은이름이 있을경우 다른이름으로 저장)
	
	try{
	multi=new MultipartRequest(request,realFolder,filesize,"utf-8",new DefaultFileRenamePolicy());
	
	//form에 있는 name과 ""안 이름이 같아야함
	String writer=multi.getParameter("writer");
	String subject=multi.getParameter("subject");
	String uploadName=multi.getFilesystemName("uFile");
	//uFile의 진짜이름
	String originalFileName=multi.getOriginalFileName("uFile");
	%>
	
	<table class="table" style="width: 300px;">
		<tr>
			<th>글쓴이</th>
			<td><%=writer %></td>
		</tr>
		<tr>
			<th>제목</th>
			<td><%=subject %></td>
		</tr>
		<tr>
			<th>업로드파일명</th>
			<%-- 프로젝트 내 파일 경로 --%>
			<td><img src="../upload/<%=uploadName%>" style="width: 100px;"></td>
		</tr>
		<tr>
			<th>원래파일명</th>
			<td><%=originalFileName %></td>
		</tr>
		
		<tr>
			<td colspan="2" align="center">
				<input type="button" value="다시업로드"
				onclick="location.href='uploadForm.jsp'">
			</td>
		</tr>
	</table>	
	
	
	<%}catch(Exception e){
		//업로드 오류 보여주는 문구
		System.out.println("업로드 오류: "+e.getMessage());
	}
	//브라우저로 업로드하면 콘솔창에 저장된 경로가 나와서 이동하면 파일 업로드 된 것을 확인 가능
%>
</body>
</html>

Fileupload - 파일 여러개 업로드

form

caption

제목 - caption align top 없으면 바닥에 떠서 필수

<%-- caption align top 없으면 바닥에 떠서 필수 --%>
<caption align="top"><b>여러개 이미지 업로드</b></caption>

process

tomcat에 업로드된 프로젝트 경로 구하기

//tomcat에 업로드된 프로젝트 경로 구하기
ServletContext context=getServletContext();
//프로젝트의 upload의 실제 경로 구하기
String realFolder=context.getRealPath("/upload");
	
System.out.println(realFolder);

업로드시 허용되는 크기 지정

//업로드시 허용되는 크기 지정
int uploadsize=1024*1024*3; //3mb

multi

try{
		multi=new MultipartRequest(request,realFolder,uploadsize,"utf-8",new DefaultFileRenamePolicy());
	
		//입력된 값들 읽어오기
		String writer=multi.getParameter("nick");
		%>
	
		<h2>작성자명: <%=writer %></h2>

업로드 파일이 여러개인 경우

getFileNames() : input 타입에서 속성이 file 로 된 이름들을 반환(반환값:Enumeration...인터페이스(api))

//getFileNames() : input 타입에서 속성이 file 로 된 이름들을 반환(반환값:Enumeration...인터페이스(api))
Enumeration forNames=multi.getFileNames(); //file타입만 얻어옴

while문 사용 - 파일 복수

복수형으로 여러 값을 얻어와야하기 때문에 while(forNames.hasMoreElements()) 사용 -->(**.next())와 같은 사용

//복수형으로 여러 값을 얻어와야하기 때문에 while(forNames.hasMoreElements()) 사용 -->(**.next())와 같은 사용
while(forNames.hasMoreElements())

while문 안 복수값 가져오기

다음값 계속 반환//반환값이 object이기 때문에 String형변환해야함

String fileName=(String)forNames.nextElement(); //다음값 계속 반환//반환값이 object이기 때문에 String형변환해야함
System.out.println("file type의 실제 name: "+fileName);

실제 업로드된 파일명 얻기

form의 photo1,2,3 실제 파일명 확인

String uploadName=multi.getFilesystemName(fileName);

파일 선택 안하면 null

파일 여러개 업로드일때 figure

여러개 업로드할 때 figure로 감싸주면 잘 정렬됨

if(uploadName!=null) //null이 아닐때만 얻어오겠다
{%>
			<%-- 여러개 업로드할 때 figure로 감싸주면 잘 정렬됨 --%>
			<figure>
			<%-- 최대 크기 200px로 조정 --%>
			<img src="../upload/<%=uploadName %>" style="max-width: 200px;" border="1"><br>
			<%-- 업로드 파일명 --%>	
			<b><%=uploadName %></b>
			</figure>
		<%}
		}
		%>
	<%} catch(Exception e){
		
	}
%>
</body>
</html>

uploadForm2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<form action="uploadProc2.jsp" method="post" enctype="multipart/form-data">
		<table class="table table-bordered" style="width: 500px;">
			<%-- caption align top 없으면 바닥에 떠서 필수 --%>
			<caption align="top"><b>여러개 이미지 업로드</b></caption>
				<tr>
					<th>작성자</th>	
					<td>
						<input type="text" name="nick" class="form-control"
						style="width: 150px;">
					</td>
				</tr>
				
				<tr>
					<th>이미지</th>
					<td>
						<input type="file" name="photo1" class="form-control"><br>
						<input type="file" name="photo2" class="form-control"><br>
						<input type="file" name="photo3" class="form-control"><br>
					</td>
				</tr>
				
				<tr>
					<td colspan="2" align="center">
						<button type="submit" class="btn btn-warning">서버에 업로드하기</button>
					</td>
				</tr>
		</table>
	</form>
</body>
</html>

uploadProc2.jsp

<%@page import="java.util.Enumeration"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	//tomcat에 업로드된 프로젝트 경로 구하기
	ServletContext context=getServletContext();
	//프로젝트의 upload의 실제 경로 구하기
	String realFolder=context.getRealPath("/upload");
	
	System.out.println(realFolder);
	
	//업로드시 허용되는 크기 지정
	int uploadsize=1024*1024*3; //3mb
	
	MultipartRequest multi=null;
	
	try{
		multi=new MultipartRequest(request,realFolder,uploadsize,"utf-8",new DefaultFileRenamePolicy());
	
		//입력된 값들 읽어오기
		String writer=multi.getParameter("nick");
		%>
	
		<h2>작성자명: <%=writer %></h2>
		
		<%
			//파일타입이 여러개인 경우
			//getFileNames() : input 타입에서 속성이 file 로 된 이름들을 반환(반환값:Enumeration...인터페이스(api))
			Enumeration forNames=multi.getFileNames(); //file타입만 얻어옴
			
			//복수형으로 여러 값을 얻어와야하기 때문에 while(forNames.hasMoreElements()) 사용 -->(**.next())와 같은 사용
			while(forNames.hasMoreElements())
			{
				String fileName=(String)forNames.nextElement(); //다음값 계속 반환//반환값이 object이기 때문에 String형변환해야함
				System.out.println("file type의 실제 name: "+fileName);
				
				//실제 업로드된 파일명 얻기
				String uploadName=multi.getFilesystemName(fileName); //form의 photo1,2,3 실제 파일명 확인
				
				//파일선택안하면 null
				if(uploadName!=null) //null이 아닐때만 얻어오겠다
				{%>
					<%-- 여러개 업로드할 때 figure로 감싸주면 잘 정렬됨 --%>
					<figure>
					<%-- 최대 크기 200px로 조정 --%>
					<img src="../upload/<%=uploadName %>" style="max-width: 200px;" border="1"><br>
					<%-- 업로드 파일명 --%>	
					<b><%=uploadName %></b>
					</figure>
				<%}
			}
		%>
	<%} catch(Exception e){
		
	}
%>
</body>
</html>

최성현

백엔드 개발자로서 성장해 나가는 성현이의 블로그~

이전 포스트

JSP - eclipse/oracle

다음 포스트

JSP - eclipse

JSP

Fileupload1

form

필수추가

action

경로

사이즈 배정

try/catch 벗어나기

DefaultFileRenamePolicy

multi

html문 출력 창

uploadForm.jsp

uploadAction.jsp

Fileupload2

form

이미지 업로드

Action(Process약자로 Proc)

가상의 폴더 생성 후 작성...업로드할 경로

생성자

try/catch - 자바문

try/catch - html문

uploadForm.jsp

uploadProc.jsp

Fileupload - 파일 여러개 업로드

form

caption

process

tomcat에 업로드된 프로젝트 경로 구하기

업로드시 허용되는 크기 지정

multi

업로드 파일이 여러개인 경우

while문 사용 - 파일 복수

while문 안 복수값 가져오기

실제 업로드된 파일명 얻기

파일 선택 안하면 null

파일 여러개 업로드일때 figure

uploadForm2.jsp

uploadProc2.jsp

JSP - eclipse/oracle

JSP - eclipse/oracle

0개의 댓글