쌍용교육(JAVA)/JSP

쌍용교육 -JSP수업 47~48일차 fileupload(2)

구 승 2024. 4. 25. 09:17

s03_profileForm.jsp 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>프로필 사진 업로드 폼</title>
<script type="text/javascript">
window.onload=function(){
	//미리 보기 이미지 호출
	const image = document.getElementById('image');
	//전송 버튼 호출
	const submit_btn = document.getElementById('submit_btn');
	
	//파일 선택시 이벤트 연결
	const file = document.getElementById('file');
	file.onchange = function(){
		if(!file.files[0]){ // 파일이 선택되지 않았을 때(파일을 변경했다가 취소를 했을 떄)
			image.src='../images/face.png';// 기본 이미지로 설정
			submit_btn.style.display = 'none';// 전송 버튼 숨김
			return; //함수종료, onchange라서 cnsubmit면 false까지 명시 
		}
		//선택한 이미지 읽기
		const reader = new FileReader(); // FileReader 객체 생성
		reader.readAsDataURL(file.files[0]); // 선택된 파일을 읽음
		
		// 파일 읽기가 완료되었을 때 실행되는 이벤트 핸들러
		reader.onload=function(){
			image.src = reader.result;// 읽은 이미지를 미리 보기로 표시
			submit_btn.style.display = ''; // 전송 버튼 표시
		};
	};
	
	
}
</script>
</head>
<body>
<h2>프로필 사진 업로드하기</h2>
<img src ="../images/face.png" width="200" height="200" id="image">
<form action = "/ch03_JSP/profile" method="post" enctype="multipart/form-data">
	<input type="file" name="file" id="file" accept = "image/png,image/jpeg,image/gif">
	<input type = "submit" value="전송" id="submit_btn" style="display:none;">
</form>
</body>
</html>

uploadServlet3.java

package kr.web.ch05;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;

@MultipartConfig(
		maxFileSize = 1024 * 1024 *10,
		maxRequestSize =1024 * 1024 *50
		)
@WebServlet("/profile")
public class uploadServlet3 extends HttpServlet{
	@Override
	public void doPost(HttpServletRequest request,
			HttpServletResponse response)
			throws ServletException, IOException{
		//컨텍스트 경로상의 파일 업로드 절대 경로 구하기
		String realFolder =
				request.getServletContext().getRealPath("/upload");
		
		//문서 타입 및 캐릭터셋 지정
		response.setContentType("text/html;charset=utf-8");
				
		//POST 방식으로 전송된 데이터 인코딩 타입 지정
		request.setCharacterEncoding("utf-8");
		
		//HTML 출력을 위한 출력 스트림 생성
		PrintWriter out = response.getWriter();
		try {
			Part part = request.getPart("file");
			String fileName = part.getSubmittedFileName();
			if(!fileName.isEmpty()) {
				part.write(realFolder+"/"+fileName);
				request.setAttribute("fileName",fileName);
				
			}
			//s04_profile.jsp 포워드
			RequestDispatcher dispatcher = 
					request.getRequestDispatcher("/ch09_fileupload/s04_profile.jsp");
			dispatcher.forward(request,response);
		}catch(IllegalStateException e) {
			out.println("용량초과 :" + e.toString());
		}
		
	}
}

s04_profile.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>프로필 사진 업로드 처리</title>
</head>
<body>
<h2>저장된 프로필 사진</h2>
<img src="/ch03_JSP/upload/<%= request.getAttribute("fileName")%>" width="500">
</body>
</html>

 

최종 결과 HTML 영상