JSP - eclipse

최성현·2023년 8월 7일
CAPTIONDefaultFileRenamePolicyactionfigure!fileuploadformgetFilesystemName(name)multimulti.getParameter("")tryCatchwhile가상의폴더생성복수파일업로드생성자업로드경로업로드파일명에러구문원본파일명이미지 업로드파일사이즈필수추가

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>
profile
최성현
백엔드 개발자로서 성장해 나가는 성현이의 블로그~
이전 포스트

JSP - eclipse/oracle

다음 포스트

JSP - eclipse/oracle

0개의 댓글