[JSP] 이미지 뷰어(업로드 및 삭제처리)

SERVER(Servlet, JSP)

[JSP] 이미지 뷰어(업로드 및 삭제처리)

developer of the night sky 2023. 10. 18. 17:46

🔻이미지 뷰어

업로드한 이미지 파일을 뷰어로 보여주고 삭제도 할 수 있는 페이지를 만들어본다.
ex18_imageviewer.jsp : 메인 파일(이미지 목록보기)
ex18_imageviewer_ok.jsp : 이미지 업로드 처리 파일
ex18_imageviewer_del.jsp : 이미지 삭제 처리 파일
webapp > "pic" 폴더 생성하여 이미지를 통합관리하는 전용 폴더를 만든다.

ex18_imageviewer.jsp

1. 디렉토리 탐색

업로드한 파일을 관리하는 전용폴더 "pic"에서 이미지들을 탐색하여 반환한다.

나중에 반환된 값을 화면에 출력한다.

<%
	String path = application.getRealPath("/pic");
	File dir = new File(path);
	File[] list = dir.listFiles();
%>

2. 화면 출력

for문으로 이미지 리스트를 하나씩 화면에 출력한다.

	 <div id="list">
		<% for(File file : list) {%> 
		<div class="item">
			<img src="pic/<%= file.getName()%>">
			<div title="delete" onclick="deleteImage('<%= file.getName()%>')">&times;</div>
		</div>
		<%} %>
	</div>

× 을 사용하여 삭제 아이콘도 출력하였다.

×은 HTML 엔터티(Entity)로서, 문자 "×" (곱하기 기호)를 나타낸다. 화면에는 실제로 "×" 아이콘으로 표시된다.

3. 데이터 송신

ex18_imageviewer_ok.jsp 에 데이터를 전송한다.

	<form method="POST" action="ex18_imageviewer_ok.jsp" enctype="multipart/form-data">
		<table class="vertical">
			<tr>
				<th>이미지</th>
				<td><input type="file" name="attach" required></td>
			</tr>
		</table>
		<div>
			<input type="submit" value="이미지 업로드">
		</div>	
	</form>

4. 이미지 삭제 버튼

삭제 버튼을 누르면 한번 더 사용자에게 확인 메시지를 띄운 후 ex18_imageviewer_del.jsp를 통해 이미지를 "pic" 폴더에서 삭제한다.

	<script>
		function deleteImage(filename) {
			if (confirm('delete?')) {
				location.href = 'ex18_imageviewer_del.jsp?filename=' + filename;
			}
		}
	</script>

ex18_imageviewer_ok.jsp

단일 파일 업로드 했던 방법대로 작성한다.
이미지를 폴더에 추가하고 ex18_imageviewer.jsp 페이지로 다시 돌아간다.
application.getRealPath("/pic")을 통해 'C:\class\code\server\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\JSPTest\pic' 로컬 경로로 들어간다.

<%@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"%>
    
<%
	String path = application.getRealPath("/pic");
	int size = 1024*1024*100;
	
	try {
		MultipartRequest multi = new MultipartRequest(
					request,
					path,
					size,
					"UTF-8",
					new DefaultFileRenamePolicy()
				);
		
	} catch(Exception e) {
		e.printStackTrace();
	}
	
	response.sendRedirect("ex18_imageviewer.jsp");
	
%>    

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex18_imageviewer_ok</title>
<link rel="stylesheet" href="http://pinnpublic.dothome.co.kr/cdn/example-min.css">
</head>
<body>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="http://pinnpublic.dothome.co.kr/cdn/example-min.js"></script>
</body>
</html>

ex18_imageviewer_del.jsp

C:\class\code\server\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\JSPTest\pic
"pic" 폴더에서 파일을 삭제하나 후 ex18_imageviewer.jsp 페이지로 다시 돌아간다.

<%@page import="java.io.File"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	String filename = request.getParameter("filename");

	String path = application.getRealPath("/pic");
	
	File file = new File(path + "\\" + filename);
	
	if(file.exists()) {
		file.delete();
	}
	
	response.sendRedirect("ex18_imageviewer.jsp");
	
%>    
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex18_imageviewer_del</title>
<link rel="stylesheet" href="http://pinnpublic.dothome.co.kr/cdn/example-min.css">
</head>
<body>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="http://pinnpublic.dothome.co.kr/cdn/example-min.js"></script>
</body>
</html>

저작자표시 (새창열림)