지난 시간에 이어서 오늘은 파일 업로드&다운로드 실습에 기능을 추가하고자 한다.
오늘은 이미지를 누르면 업로드 되어 있는 사진을 팝업 형태로 상세보기 할 수 있는 기능을 추가할 것이다.
- photo_list.jsp파일에서 <img>태그에 onclick속성을 추가하고 photo_view()함수를 추가한다.
- 기본적으로 모든 이미지들은 JSTL의 forEach문을 사용해서 출력했다. 상세보기를 하기 위해선 내가 클릭한 이미지가 어떤 이미지인지 알아야 해당 이미지를 데이터베이스에서 가져올 수 있다. 하지만 forEach문의 반복첨자로 사용하던 vo는 "Java"언어이기 때문에 이 문법을 그대로 함수의 인자로 전송하면 이 함수를 실질적으로 처리하는 언어는 JavaScript이기 때문에 인식이 안될수가있다. 따라서 필자는 클릭한 이미지의 번호만을 서버로 넘겨서 서버에서는 JavaScript에서 인식할 수 있는 Json형식으로 사진에 대한 데이터를 응답할 것이다.
- photo리스트를 출력해주는 것은 서버에서 처리해주는 서버쪽 코드(java)이고, 사진을 눌렀을때, 실행되는 함수에 대한 내용은 클라이언트쪽 코드(JS)이다.
- 항상 서버쪽 코드와 클라이언트쪽 코드를 구분해야 한다.
- 수정과 삭제 버튼은 게시물을 업로드 한 본인 또는 관리자만 보이도록 UI를 구현할 것이다.
[ photo_popup.jsp ]
팝업에대한 UI를 구현해서 photo_list.jsp에 include 해주어서, 사진을 누르면 바로 팝업이 브라우저에 중앙에 나오도록 계산해서 띄워줄 것이다.
팝업이 시작되는 왼쪽 위 위치 좌표 -> [브라우저 너비의 반 - 팝업 너비의 반, 브라우저 높이의 반 - 팝업 높이의 반]
photo_list.jsp에서 body태그의 가장 위쪽 부분에 방금 작성한 photo_popup을 추가한다. 어차피 파일을 include하여 하나의 파일상태로 합치기 때문에 x버튼에 지정할 이벤트함수는 어디에 정의하던 상관없다. 필자는 photo_list.jsp에 정의했다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
#photo_popup{
width: 300px;
padding: 10px;
border: 2px solid white;
position: absolute;
left:400px;
top: 100px;
background: #222222;
color: white;
box-shadow: 2px 2px 3px black;
display: none /*hide*/
}
#photo_popup > img{
width : 272px;
height: 272px;
border: 1px solid green;
outline: 1px solid black;
margin: 2px;
}
#photo_subject{
width: 98%;
margin: 3px;
padding: 3px;
border: 1px solid gray;
min-height: 40px;
outline: 1px solid black;
}
#photo_content{
width: 98%;
margin: 3px;
padding: 3px;
border: 1px solid gray;
min-height: 60px;
outline: 1px solid black;
}
</style>
</head>
<body>
<div id="photo_popup">
<div style="text-align: right;">
<span id="photo_regdate"></span>
<input type="button" value="X" style="color: red;" onclick="hide_photo_popup();">
</div>
<img id="img_photo" src="">
<div id="photo_subject">제목</div>
<div id="photo_content">내용</div>
<div id="photo_job" style="text-align: center; display: none;">
<input class="btn btn-info" type="button" value="수정">
<input class="btn btn-danger" type="button" value="삭제">
</div>
</div>
</body>
</html>
|
cs |
[ photo_list.jsp 일부분 ]
화면 중앙에 팝업을 배치하고, 비동기로 DB에서 데이터를 읽어와 팝업에 출력한다.
- url : 전송대상을 설정한다.
- data : 전송 대상에게 전송할 데이터를 json타입으로 포장한다.
- dataType : 전송 데이터 타입을 명시한다.
- success : 인자를 전송하여 성공적으로 결과값 res_data를 받은 경우 실행할 함수를 지정한다.(콜백 함수)
- id값이 img_photo인 태그의 src속성을 지정해준다.
- attr()은 Attribute의 약자로 해당 태그의 속성값을 줄 수 있다.
- 다음의 조건을 만족하는 경우에만 버튼을 보이도록 한다.
- 로그인을 한 경우 로그인 한 사용자의 m_idx(회원번호)와 파일을 업로드한 사용자의 m_idx가 동일한 경우에만 버튼 show(자신이 업로드한 파일에 대해서만 수정&삭제 권한을 준다.)
- 로그인한 사용자의 m_grade가 관리자 등급인 경우 버튼 show(관리자는 모든 파일에 대해 수정&삭제가능하다.)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<script>
function photo_view(p_idx){
//화면 중앙 배치
center_photo_popup();
//데이터 가져와서 셋팅하기
$.ajax({
url :'photo_view.do', //PhotoViewAction data :{'p_idx' : p_idx},
dataType:'json',
success :function(res_data){
//팝업 윈도우 배치 작업
//res_data={'p_idx':20, 'p_subject':제목, 'p_content':'내용', ..., 'm_idx':3};
$("#img_photo").attr('src','../upload/' + res_data.p_filename);
$("#photo_subject").html(res_data.p_subject);
$("#photo_content").html(res_data.p_content);
$("#photo_regdate").html(res_data.p_regdate.substring(0,16));
//수정&삭제 버튼의 사용 유무
//현재 로그인한 유저의 번호와 비동기로 읽어온 번호가 같으면 수정 삭제버튼 보이기
// 게시글의 주인인 경우 관리자인 경우
if( ('${user.m_idx}' == res_data.m_idx) || ("${user.m_grade eq '관리자'}" == "true" ) ){
$("#photo_job").show();
}else{
$("#photo_job").hide();
}
},
error :function(err){
alert(err.responseText);
}
});
function center_photo_popup(){
//브라우저의 너비 높이 구하기
var w_width = $(window).width();
var w_height = $(window).height();
console.log(w_width, w_height);
//popup크기 구하기
var p_width = $("#photo_popup").width();
var p_height = $("#photo_popup").height();
console.log(p_width, p_height);
var left = w_width/2 - p_width/2;
var top = w_height/2 - p_height/2;
$("#photo_popup").css({'left':left, 'top':top});
$("#photo_popup").show();
}
function hide_photo_popup(){
$("#photo_popup").hide();
}
</script>
<body>
<!-- photo_popup추가 -->
<%@include file="photo_popup.jsp" %>
...
</body>
|
cs |
[ PhotoViewAction ]
- ajax로 전송한 파라미터 p_idx를 수신한다.
- 수신한 인자를 사용해 인자에 해당하는 파일 정보를 vo로 읽어온다.
- vo에 담긴 정보를 json에 포장한다.
- 응답 데이터의 타입을 설정하고 데이터를 응답한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
package action.photo;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONObject;
import dao.PhotoDao;
import vo.PhotoVo;
/**
* Servlet implementation class PhotoViewAction
*/
@WebServlet("/photo/photo_view.do")
public class PhotoViewAction extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
// /photo/photo_view.do?p_idx=5
int p_idx = Integer.parseInt(request.getParameter("p_idx"));
PhotoVo vo = PhotoDao.getInstance().selectOne(p_idx);
//Vo -> JSON
JSONObject json = new JSONObject();
if(vo!=null) {
json.put("p_idx", vo.getP_idx());
json.put("p_subject", vo.getP_subject());
json.put("p_content", vo.getP_content());
json.put("p_filename", vo.getP_filename());
json.put("p_ip", vo.getP_ip());
json.put("p_regdate", vo.getP_regdate());
json.put("m_idx", vo.getM_idx());
}else {
json.put("p_idx", 0);
}
String json_str = json.toJSONString();
//응답
response.setContentType("text/json; charset=utf-8;");
response.getWriter().print(json_str);
}
}
|
cs |
[ 수정&삭제 기능 구현 ]
위에서 정의한 팝업 닫기 버튼의 이벤트 함수와 같은 맥락이다. 버튼은 실제로 photo_popup.jsp파일에 있지만 이 파일을 photo_list.jsp에 include했기 때문에 이벤트 함수를 photo_list.jsp에 정의하겠다.
수정은 이미지를 바꾸게 되면 많이 복잡한 상황이 벌어진다고 한다. 그래서 이번에는 이미지를 제외한 나머지만 수정하도록 하겠다.
삭제를 구현하기 위해서는 DB에 있는 데이터만을 수정하는 것이 아니라, 업로드한 파일 또한 함께 삭제해야 한다.
[ PhotoDeleteAction ]
세션트래킹 : 특정 이미지가 선택이 되어 팝업이 올라오면 해당 인덱스 값을 JS상에서 전역변수로 저장을 하고, 이 값을 삭제 서블릿에 파라미터로 전달해준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
package action.photo;
import java.io.File;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dao.PhotoDao;
import vo.PhotoVo;
/**
* Servlet implementation class PhotoDeleteAction
*/
@WebServlet("/photo/delete.do")
public class PhotoDeleteAction extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
// /photo/delete.do?p_idx=1
//1. 파라미터 수신
int p_idx = Integer.parseInt(request.getParameter("p_idx"));
//2. p_idx에 해당하는 vo 1건 읽어오기
PhotoVo vo = PhotoDao.getInstance().selectOne(p_idx);
//3. 업로드한 파일이 존재하는 절대경로
String web_path="/upload/";
String path = request.getServletContext().getRealPath(web_path);
//4. 절대경로 구해서 파일 삭제
File f = new File(path, vo.getP_filename());
f.delete();
//5. DB delete
int res = PhotoDao.getInstance().delete(p_idx);
//6. 목록보기로 이동
response.sendRedirect("list.do");
}
}
|
cs |
[ PhotoModifyFormAction ]
- p_idx 수신
- p_idx에 해당하는 레코드 조회하여 request binding
- 내용을 출력하는 부분은 html로 출력하는 것이 아니고 textarea에 출력하여 계속 내용을 작성할 수 있도록 해야 하기 때문에 <br> -> \r\n으로 수정한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
package action.photo;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dao.PhotoDao;
import vo.PhotoVo;
/**
* Servlet implementation class PhotoModifyFormAction
*/
@WebServlet("/photo/modify_form.do")
public class PhotoModifyFormAction extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
//1. 파라미터 수신
int p_idx = Integer.parseInt(request.getParameter("p_idx"));
//2. p_idx에 해당하는 객체 조회
PhotoVo vo = PhotoDao.getInstance().selectOne(p_idx);
//내용은 <br> -> \r\n으로 바꿔야 함
String content = vo.getP_content().replaceAll("<br>", "\r\n");
vo.setP_content(content);
//3. request binding
request.setAttribute("list", vo);
//forward
String forward_page = "photo_modify_form.jsp";
RequestDispatcher disp = request.getRequestDispatcher(forward_page);
disp.forward(request, response);
}
}
|
cs |
[ photo_modify_form.jsp ]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- BootStrap 3.x -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
#box{
width: 500px;
margin: auto;
margin-top: 50px;
}
textarea{
width: 100%;
height: 150px;
resize: none;
}
#modify_photo{
width: 100%;
}
</style>
<script type="text/javascript">
function send(f){
if(confirm("정말 수정하시겠습니까?")==false) return;
var p_subject = f.p_subject.value.trim();
var p_content = f.p_content.value.trim();
if(p_subject==''){
alert('제목을 입력하세요!!!');
f.p_subject.value='';
f.p_subject.focus();
return;
}
if(p_content==''){
alert('내용을 입력하세요!!!');
f.p_content.value='';
f.p_content.focus();
return;
}
f.action="modify.do" //PhotoModifyAction
f.submit();
}
</script>
</head>
<body>
<form>
<input type="hidden" name="p_idx" value="${list.p_idx }">
<div id="box">
<div class="panel panel-success">
<div class="panel-heading">내용수정(최근 수정시간: ${fn:substring(list.p_regdate,0,16) })</div>
<div class="panel-body">
<table class="table table-striped">
<tr>
<td colspan="2"><img id="modify_photo" src="../upload/${list.p_filename }"></td>
</tr>
<tr>
<th>제목</th>
<td><input name="p_subject" style="width: 100%;" value="${list.p_subject }"></td>
</tr>
<tr>
<th>내용</th>
<td><textarea name="p_content">${list.p_content }</textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<input class="btn btn-primary" type="button" value="수정하기" onclick="send(this.form);">
<input class="btn btn-info" type="button" value="목록보기" onclick="location.href='list.do';">
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>
|
cs |
[ PhotoModifyAction ]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
package action.photo;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dao.PhotoDao;
import vo.PhotoVo;
/**
* Servlet implementation class PhotoModifyAction
*/
@WebServlet("/photo/modify.do")
public class PhotoModifyAction extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
//1. 수신 인코딩
request.setCharacterEncoding("utf-8");
//2. 파라미터 수신
// /photo/modify.do?p_idx=7&p_subject=수정을+시작하지&p_content=삭제는+성공+%0D%0A수정은+불가
int p_idx = Integer.parseInt(request.getParameter("p_idx"));
String p_subject = request.getParameter("p_subject");
String p_content = request.getParameter("p_content").replaceAll("\r\n", "<br>");
//3. 수정하는 사용자의 ip얻기
String p_ip = request.getRemoteAddr();
//4. 포장하기
PhotoVo vo = new PhotoVo();
vo.setP_idx(p_idx);
vo.setP_subject(p_subject);
vo.setP_content(p_content);
vo.setP_ip(p_ip);
//5. DB Update
int res = PhotoDao.getInstance().update(vo);
//6. 목록보기 이동
response.sendRedirect("list.do");
}
}
|
cs |
[ 사진 수정 ]
내용 수정과 별개로 진행되며 사진을 수정하는 작업은 다음과 같다.
- 기존의 업로드 해두었던 파일의 정보를 불러와서 실제 파일이 저장된 경로에서 파일을 삭제한다.
- 새로 업로드 하고자 하는 파일의 이름을 알아낸다.
- DB에 저장된 내용을 새로 받은 파일의 정보로 수정한다.
[ photo_modify_form.jsp ] -> 비동기 통신을 이용해 사진 정보 수정하기
- 실제로 사진을 수정하는 file버튼은 바디태그에 display none으로 숨겨놓는다.
- 별도의 버튼을 만들어서 해당 버튼이 눌리면 실제 역할을 하는 버튼을 클릭하도록 한다. -> ajaxFileUpload()
- 파일선택 화면이 나오도록 하고 중간에 사용자가 파일을 선택하지 않으면 return시킨다.
- file속성을 가진 input태그에 multiple속성을 주면 2개 이상의 파일을 선택할 수 있기 때문에 배열의 첨자를 사용했다. 이번에는 하나의 파일만 수정이 가능하지만, 후에 2개 이상의 파일을 선택 및 수정하는 경우에도 코드의 수정을 용이하게 하기 위하여 배열을 사용하여 코드를 구성했다.
- 파일을 구분하기 위해 인덱스와 새로 선택한 파일의 이름을 데이터로 전송한다.
- 서블릿에서는 파일의 인덱스 번호를 사용해 기존의 파일이름을 알아내고 삭제한다.
- 새로 선택한 파일의 이름을 DB에 수정하고 결과 값을 출력해준다.
- 비동기 함수가 성공적으로 수행되면 -> success라면 기존에 보여주던 이미지의 정보가 바뀌었으니 방금 비동기로 수신한 새로운 파일명을 img태그의 src속성에 수정해준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<script>
//Ajax파일 업로드 코드...
function ajaxFileUpload() {
// 업로드 버튼이 클릭되면 파일 찾기 창을 띄운다.
// == 사진 수정 버튼을 클릭하면 -> 숨겨놓은 버튼이 클릭되도록 설정한다.
$("#ajaxFile").click();
}
function ajaxFileChange() {
// 파일이 선택되면 업로드를 진행한다.
photo_upload();
}
function photo_upload() {
//파일선택->취소시
if ($("#ajaxFile")[0].files[0] == undefined)
return;
var form = $("#ajaxForm")[0];
var formData = new FormData(form);
formData.append("p_idx", '${ list.p_idx }');
formData.append("photo", $("#ajaxFile")[0].files[0]); //photo_upload.do?p_idx=55&photo=a.jpg
$.ajax({
url : "photo_upload.do", //PhotoUploadAction
type : "POST",
data : formData,
processData : false,
contentType : false,
dataType : 'json',
success : function(result_data) {
//result_data = {"p_filename":"aaa.jpb"}
//location.href=''; //자신의 페이지를 리로드(refresh)
$("#modify_photo").attr("src",
"../upload/" + result_data.p_filename);
},
error : function(err) {
alert(err.responseText);
}
});
}
</script>
</head>
<body>
<!--화일업로드용 폼 -->
<!-- 실제 파일 업로드는 이 form이 담당하게 되고, display를 none으로 한다.
우리가 만들어 놓은 버튼을 누르면 이 버튼이 눌리는 것처럼 동작되도록 구현한다. -->
<form enctype="multipart/form-data" id="ajaxForm" method="post">
<input type="file" id="ajaxFile" style="display: none;"
onChange="ajaxFileChange();">
</form>
...
</body>
|
cs |
[ PhotoUploadAction ]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
package action.photo;
import java.io.File;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONObject;
import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;
import dao.PhotoDao;
import vo.PhotoVo;
/**
* Servlet implementation class PhotoUploadAction
*/
@WebServlet("/photo/photo_upload.do")
public class PhotoUploadAction extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
// /photo_upload.do?p_idx=55&photo=a.jpg
//1. 저장경로(절대경로)
String path = request.getServletContext().getRealPath("/upload/");
//2. 파일 업로드 최대 용량
int max_size = 1024*1024*100;
//3. 파일 업로드 처리 객체 저장위치 최대크기 인코딩 동일파일 -> 이름변경
MultipartRequest mr = new MultipartRequest(request, path, max_size, "utf-8", new DefaultFileRenamePolicy());
//4. parameter받기
int p_idx = Integer.parseInt(mr.getParameter("p_idx"));
//이전 파일 삭제(기존에 저장된 파일의 정보를 불러와서 파일이 저장된 경로에서 삭제를 한다.)
PhotoVo originVo = PhotoDao.getInstance().selectOne(p_idx);
File deleteFile = new File(path, originVo.getP_filename());
deleteFile.delete();
//5. 업로드 파일 이름 구하기
String p_filename = mr.getOriginalFileName("photo");
if(p_filename == null) p_filename = "no_file";
//6. DB Update_filename
PhotoVo vo = new PhotoVo();
vo.setP_idx(p_idx);
vo.setP_filename(p_filename);
int res = PhotoDao.getInstance().update_filename(vo);
//7. 결과 전송 : json{p_filename : a.jpg}
JSONObject json = new JSONObject();
json.put("p_filename", p_filename);
String json_str = json.toJSONString();
response.setContentType("text/json; charset=utf-8;");
response.getWriter().print(json_str);
}
}
|
cs |
'BackEnd > WEB' 카테고리의 다른 글
| XML_Naver검색API_국비DAY71 (0) | 2022.06.13 |
|---|---|
| XML_국비_DAY70 (0) | 2022.06.10 |
| 세션 트래킹_국비_Day68 (0) | 2022.06.08 |
| 파일업로드_국비_DAY67 (0) | 2022.06.07 |
| 백준[자바]_2206_벽부수고이동하기_BFS_너비우선탐색 (0) | 2022.06.07 |
