JSP 게시판 만들기(파일업로드)

 

 

게시글 작성에서 파일을 업로드하는 방법에 대해 알아보자.

 

파일 업로드를 시작하기 앞서 라이브러리 한가지를 다운받아야한다.

 

http://www.servlets.com/ 사이트에 들어가서

Servlets.com

 

좌측사이트 메뉴에 COS File Upload Library에 들어가보면,

 

cos-20.08.zip 파일을 다운 받으면 된다.

 

다운 받은 파일은 해당 프로젝트에서 라이브러리를 추가해주면된다.

 

 

 

 

 

게시 글 작성 페이지(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 태그 내 file 타입의 input 태그를 넣어주고 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 폴더에서 파일을 찾는 방식이다.

 

그럼 등록이 잘 되었는지 확인하기 위해 veiw.jsp를 수정하여 확인해보자.

 

 

 

 

 

 

게시글 상세 페이지(view.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 폴더(원본 저장 폴더)에서 파일을 불러와 화면에 출력한다.

 

 

 

 

글 작성 페이지

 

 

파일 업로드 완료