๐ป์ด๋ฏธ์ง ๋ทฐ์ด
- ์ ๋ก๋ํ ์ด๋ฏธ์ง ํ์ผ์ ๋ทฐ์ด๋ก ๋ณด์ฌ์ฃผ๊ณ ์ญ์ ๋ ํ ์ ์๋ ํ์ด์ง๋ฅผ ๋ง๋ค์ด๋ณธ๋ค.
- 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()%>')">×</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>
'SERVER(Servlet, JSP)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JDBC] DB ์ฐ๊ฒฐํ ๋ ์์ฃผ ๋ฐ์ํ๋ ์ค๋ฅ ๋ฐ ํด๊ฒฐ ๋ฐฉ๋ฒ (0) | 2023.10.22 |
|---|---|
| [JSP] ํ์ด์ง ์ด๋๊ณผ ๋ด์ฅ ๊ฐ์ฒด ์ ์ฅ์์ ์๋ช ์ฃผ๊ธฐ(โ ) (0) | 2023.10.19 |
| [JSP] cos library๋ฅผ ํ์ฉํ ํ์ผ ์ ๋ก๋/๋ค์ด๋ก๋ (0) | 2023.10.18 |
| [JSP] JSP ๊ฐ์ฒด : session ๊ฐ์ฒด (0) | 2023.10.18 |
| [JSP] JSP ๋ด์ฅ ๊ฐ์ฒด (request, pageContext, session, application ) (0) | 2023.10.18 |
