목차)
1. 파일 업로드 기능 추가방법
2. 질문/해답
파일 업로드 기능을 추가하고자 한다:
방법:
1) COS maven library 추가
2) Upload 폴더 생성 (WebContents밑에): 이곳에 이미지 파일을 둘것이다.
3) fileform.jsp , fileupload.jsp를 생성한다.
--> fileform.jsp에서 form 태그에 enctype="mulitipart/form-data" 부분을 필수로 추가해야한다!! (파일 첨부를 위한 기능)
--> fileupload.jsp에서는 아래 3개를 꼭 include해야한다.
<%@ page import ="com.javatpoint.*, java.io.File" %> (패키지 내의 모든 파일 + java.io.File 라이브러리 추가)
<%@ page import ="com.oreilly.servlet.*" %>
<%@ page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"
(추가로, DB에 값을 저장하고 싶으면 javabean을 사용할 때 이미지 필드도 추가되게 하기 위해, (Book.java bean에 image이라는 변수를 추가해주고, getter 와 setter 메서드를 추가해줘야 한다 -> 그럼 BookDAO.java도 당연스럽게 새로운 변수인 image를 위해 함수들을 수정해야한다. )
bookform.jsp (도서 추가 작성 폼)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<title>Insert title here</title>
</head>
<body>
<h1> Register a new book </h1>
<form action="addbook.jsp" method="post" accept-charset="utf-8" enctype="Multipart/form-data">
<table>
<tr><td>Title </td><td><input type="text" name="title"/></td></tr>
<tr><td>Author </td><td><input type="text" name="author"/></td></tr>
<tr><td>Comment </td><td><textarea name="comment"></textarea></td></tr>
<tr><td>Image </td><td><input type="file" name="photo" /><br />
<tr><td><input type="submit" value="save" class="btn btn-success"/></td> <td><a href="./index.jsp" class="btn btn-default">Cancel</a></td>
</table>
</form>
</body>
</html>
addbook.jsp (fileupload.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import = "com.javatpoint.*, java.io.File" %>
<%@ page import ="com.oreilly.servlet.*" %>
<%@ page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy" %>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@page import="com.javatpoint.dao.BookDao"%>
<jsp:useBean id="b" class="com.javatpoint.bean.Book"></jsp:useBean>
<jsp:setProperty property="*" name="b"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파일 업로드 결과 </title>
</head>
<body>
<%
String filename="";
int sizeLimit = 15 * 1024 * 1024;
// 상대경로를 절대경로로 가져와야함
String realPath = request.getServletContext().getRealPath("upload");
System.out.println(realPath);
//upload 폴더가 없는 경우 폴더를 만들어야함.
File dir = new File(realPath);
if(!dir.exists()) dir.mkdirs();
MultipartRequest multi = null;
multi= new MultipartRequest(request, realPath,
sizeLimit, "utf-8",new DefaultFileRenamePolicy());
String title = multi.getParameter("title");
/* System.out.println(title); */
String author = multi.getParameter("author");
String comment = multi.getParameter("comment");
filename = multi.getFilesystemName("photo");
/* System.out.println(filename); */
/* 이 부분이 정말 중요!! 전에는 addbook에서 set하는 부분 없어도 잘 작동했었는데... ? */
b.setTitle(title);
b.setAuthor(author);
b.setComment(comment);
b.setImage(filename);
%>
<%
int i=BookDao.save(b);
if(i>0){
response.sendRedirect("addbook-success.jsp");
}else{
response.sendRedirect("addbook-error.jsp");
}
%>
</body>
</html>
4) DB테이블에 새로운 이미지 필드를 추가:
ex) 테이블필드추가 : ALTER TABLE Books ADD image varchar(40);
library 추가 : cos.jar
upload 폴더 추가:
WebContents밑에 upload 폴더를 추가한다:
다음 블로그를 참고할것:
rongscodinghistory.tistory.com/77
다른 학우님의 깃헙 주소도 참고할것:
github.com/gracenho829/2021Camp/blob/master/Lab15/WebContent/addbook.jsp
질문:
<img src="${pageContext.request.contextPath }/upload/<%=b.getImage()%>">
pageContext.request.contextPath ==> 이게 뭔지 잘알아보기... 아니.. DB에는 이미지 이름만 넣어도 localhost/upload폴더에 잘 들어가있고, 이걸 heroku에서 접근할 수 있다는게 그러니까, 어떻게 heroku에서 db4free에 있는 파일을 접근했더라...? 아니 DAO에서 db4free로 접근하니까 그렇지. Heroku는 그냥 외부에 프로젝트를 서비스하게 해주는거고...!
결론) 일단 위에 코드가 뭔 뜻인지 분석해보자.
alter table 테이블명 convert to character set utf8;
BookDao --> setImage
b.setImage(rs.getString("image"));
DB에 한글이 깨져서 나올때: 그리고 과제 제출확인시트에서 다른 날짜들 표시 안된거 이유
물어보기
'웹캠프2021' 카테고리의 다른 글
| 웹캠프:Spring2 1/26 (0) | 2021.01.31 |
|---|---|
| 웹캠프: Spring1 (1/25) (0) | 2021.01.27 |
| 웹 캠프: JSP4 1/21 (0) | 2021.01.23 |
| 웹캠프: JSP3 1/20 (0) | 2021.01.23 |
| 웹캠프 : JSP2 1/19 (0) | 2021.01.22 |