업로드를 실행시켜줄 파일들
이미지 담을 가상의 폴더
cos.jar/method=post/enctype="multipart/form-data" 는 업로드 도우미 역할로 필요한 파일
pc에 있는 다른 이미지를 가져와서 업로드 하는 것 / enctype은 fileupload에서 필수
<form action="uploadAction.jsp" method="post" enctype="multipart/form-data">
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에 갇히면 변수 사용 못하기 때문에 null로 먼저 생성해주는 것
MultipartRequest multi=null;
파일이 같은 이름이면 자동으로 번호를 매겨줌
이건 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");
위에 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){
}
%>
<%@ 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>
<%@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>
form자체가 multipart 업로드할 경로/ 업로드할 파일의 크기 등 처리해줌
이미지 업로드 버튼이라 필수
<tr>
<%-- 이미지 업로드 필수 코드 --%>
<th>이미지 업로드</th>
<td>
<input type="file" name="uFile" class="form-control">
</td>
</tr>
ServletContext context=getServletContext();
//가상의 폴더를 써준다...업로드할 경로
String realFolder=context.getRealPath("/upload");
생성자 (request,fileDirectory(업로드할 경로),1024*5(업로드할 파일의 크기),
"utf-8"(한글타입) , new DefaultFileRenamePolicy() <-같은이름이 있을경우
다른이름으로 저장 )
//생성자
MultipartRequest multi=null;
multi.getParameter("") -"" 안 값은 form에 있는 name값
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");
%>
업로드 파일명은 같은 이름이 있으면 생산자의 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>
<%@ 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>
<%@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>
제목 - caption align top 없으면 바닥에 떠서 필수
<%-- caption align top 없으면 바닥에 떠서 필수 --%>
<caption align="top"><b>여러개 이미지 업로드</b></caption>
//tomcat에 업로드된 프로젝트 경로 구하기
ServletContext context=getServletContext();
//프로젝트의 upload의 실제 경로 구하기
String realFolder=context.getRealPath("/upload");
System.out.println(realFolder);
//업로드시 허용되는 크기 지정
int uploadsize=1024*1024*3; //3mb
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(forNames.hasMoreElements()) 사용 -->(**.next())와 같은 사용
//복수형으로 여러 값을 얻어와야하기 때문에 while(forNames.hasMoreElements()) 사용 -->(**.next())와 같은 사용
while(forNames.hasMoreElements())
다음값 계속 반환//반환값이 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);
여러개 업로드할 때 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>
<%@ 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>
<%@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>