JSP day16
JSP로 게시판 번외(파일업로드)
이번 시간에는 게시글쓰기에 추가 기능으로 파일을 업로드하는 방법에 대해 알아보자.
파일 업로드를 시작하기 앞서 라이브러리 한가지를 다운받아야한다.
http://www.servlets.com/ 사이트에 들어가서 좌측사이트 메뉴에 COS File Upload Library를 클릭하고
하단 cos-20.08.zip 파일을 다운 받으면 된다.
그 후 해당 프로젝트에서 라이브러리를 추가해주면된다.
그럼 저번 게시판 만들기와 연결하여 write.jsp를 보자.
write.jsp
<form method="post" action="./write_ok.jsp" enctype="multipart/form-data">
<p>작성자 : <%=userid%></p>
<p>제목<input type="text" name="b_title"></p>
<p>내용</p>
<p><textarea name="b_content" rows="5" column="40"></textarea></p>
<P><input type="file" name="b_file"></P>
<p><input type="submit" value="등록"> <input type="reset" value="다시작성"> <input type="button" value="리스트" onclick="location.href='list.jsp'"></p>
</form>
파일을 등록하기 위해서 form태그 내 input[type=”file”]를 넣어주고 form 태그에 enctype=”multipart/form-data”를 추가해준다.
enctype는 폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시해주는 역할로, multipart/form-data의 경우 모든 문자를 인코딩하지 않고 파일이나 이미지를 서버로 전송할 때 사용되는 속성값이다.
write_ok.jsp
<%@ page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.koreait.db.Dbconn" %>
<%@ page import="com.oreilly.servlet.MultipartRequest"%> <!-- 파일 업로드간 필요 -->
<%@ page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%> <!-- 파일 업로드간 필요 -->
<%
request.setCharacterEncoding("UTF-8");
String userid = (String)session.getAttribute("userid");
if(userid == null){
%>
<script>
alert('로그인 후 이용하세요');
location.href='../login.jsp';
</script>
<%
}else{
String uploadPath = request.getRealPath("upload"); // 저장위치 설정
// System.out.println(uploadPath); // 저장위치를 확인 : 확인한 장소에 같은 폴더 하나더 생성하기위해
int size = 1024*1024*10; // 파일크기 설정 : 10MB
Connection conn = null;
PreparedStatement pstmt = null;
String sql = "";
try {
/* MultipartRequest의 객체를 생성하고 생성된 참조변수로 getParameter(일반변수), getFilesystemName(파일) 불러옴*/
/* MultipartRequest(request, 저장위치, 파일크기, 인코딩타입, 파일정책) */
MultipartRequest multi = new MultipartRequest(request, uploadPath, size, "UTF-8", new DefaultFileRenamePolicy());
String b_title = multi.getParameter("b_title");
String b_content = multi.getParameter("b_content");
String b_file = multi.getFilesystemName("b_file"); /* DB내부에는 파일의 이름이 저장됨 */
conn = Dbconn.getConnection();
if (conn != null) {
sql = "insert into tb_board (b_userid, b_title, b_content, b_file) values (?, ?, ?, ?);";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, userid);
pstmt.setString(2, b_title);
pstmt.setString(3, b_content);
pstmt.setString(4, b_file);
pstmt.executeUpdate();
}
} catch (Exception e) {
e.printStackTrace();
}
%>
<script>
alert('게시글이 등록되었습니다.');
location.href='./list.jsp';
</script>
<%
}
%>
form태그로 전달된 파일 데이터는 multi.getFilesystemName를 통해 파일의 이름이 변수에 저장되게된다.
String uploadPath = request.getRealPath("upload"); // 저장위치 설정
// System.out.println(uploadPath); // 저장위치를 확인 : 확인한 장소에 같은 폴더 하나더 생성하기위해
위 코드는 서버 내 upload라는 저장공간(폴더)를 두어 DB에 저장되는 파일은 upload에 저장되고 실제로 DB에는 파일의 이름이 저장되게된다. 파일을 불러올 때는 이름으로 upload 폴더에서 파일을 찾게된다.
위와 같은 방법으로 DB에 파일이 등록되게된다.
그럼 등록이 잘 되었는지 veiw.jsp를 수정하여 확인해보자.
veiw.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="com.koreait.db.Dbconn"%>
<%
String userid = (String)session.getAttribute("userid");
if(userid == null){
%>
<script>
alert('로그인 후 이용하세요');
location.href='../login.jsp';
</script>
<%
}else{
String b_idx = request.getParameter("b_idx");
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String sql = "";
String b_userid = "";
String b_title = "";
String b_content = "";
String b_regdate = "";
int b_like = 0;
int b_hit = 0;
String b_file = "";
try{
conn = Dbconn.getConnection();
if(conn != null){
sql = "update tb_board set b_hit = b_hit + 1 where b_idx=?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, b_idx);
pstmt.executeUpdate();
sql = "select b_idx, b_userid, b_title, b_content, b_regdate, b_like, b_hit, b_file from tb_board where b_idx=?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, b_idx);
rs = pstmt.executeQuery();
if(rs.next()){
b_userid=rs.getString("b_userid");
b_title=rs.getString("b_title");
b_content=rs.getString("b_content");
b_regdate=rs.getString("b_regdate");
b_like=rs.getInt("b_like");
b_hit=rs.getInt("b_hit");
b_file=rs.getString("b_file");
}
}
}catch (Exception e) {
e.printStackTrace();
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>커뮤니티 - 글보기</title>
<script>
function like(){
const xhr = new XMLHttpRequest();
xhr.open('GET', './like_ok.jsp?b_idx=<%=b_idx%>', true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
document.getElementById('like').innerHTML = xhr.responseText;
}
}
}
function replyDelete(r_idx){
const yn = confirm('삭제하시겠습니까?');
if(yn){
location.href="./reply_del_ok.jsp?r_idx="+r_idx+"&b_idx=<%=b_idx%>;
}
}
</script>
</head>
<body>
<h2>커뮤니티 - 리스트</h2>
<table border="1" width="800">
<tr>
<td>제목</td><td><%=b_title%></td>
</tr>
<tr>
<td>날짜</td><td><%=b_regdate%></td>
</tr>
<tr>
<td>작성자</td><td><%=b_userid%></td>
</tr>
<tr>
<td>조회수</td><td><%=b_hit%></td>
</tr>
<tr>
<td>좋아요</td><td><span id="like"><%=b_like%></span></td>
</tr>
<tr>
<td>내용</td><td><%=b_content%></td>
</tr>
<tr>
<td>파일</td>
<td>
<%
if(b_file != null && !b_file.equals("")){
out.println("<img src='../upload/" + b_file +"' arl='첨부파일' width='150'>");
}
%>
</td>
</tr>
<tr>
<td colspan="2">
<%
if(b_userid.equals(userid)){
%>
<input type="button" value="수정" onclick="location.href='./edit.jsp?b_idx=<%=b_idx%>'">
<input type="button" value="삭제" onclick="location.href='./delete.jsp?b_idx=<%=b_idx%>'">
<%
}
%>
<input type="button" value="좋아요" onclick="like()">
<input type="button" value="리스트" onclick="location.href='./list.jsp'">
</td>
</tr>
</table>
<hr>
<form method="post" action="reply_ok.jsp">
<input type="hidden" name="b_idx" value="<%=b_idx%>">
<p><%=userid%> : <input type="text" size="40" name="r_content"> <input type="submit" value="확인"></p>
</form>
<hr>
<%
try{
conn = Dbconn.getConnection();
if(conn != null){
sql = "select r_idx, r_userid, r_content, r_regdate from tb_reply where r_boardidx=? order by r_idx desc";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, b_idx);
rs = pstmt.executeQuery();
}
}catch (Exception e) {
e.printStackTrace();
}
while(rs.next()){
int r_idx =rs.getInt("r_idx");
String r_userid=rs.getString("r_userid");
String r_content=rs.getString("r_content");
String r_regdate=rs.getString("r_regdate");
%>
<p><%=r_userid%> : <%=r_content%> (<%=r_regdate%>)
<%
if(r_userid.equals(userid)){
%>
<input type="button" value="삭제" onclick="replyDelete(<%=r_idx%>)">
<%
}
%>
</p>
<%
}
%>
</body>
</html>
<%
}
%>
파일의 이름을 DB에서 불러와 파일이름이 존재하면 파일이름으로 upload폴더에서 파일을 불러와 화면에 출력하게된다.
결과를 확인해보자.
파일 등록)
글 상세 보기)