[본격 게시판짜기 Part2.9 Model2 MVC패턴] 파일업로드 기능추가

안녕하세요 cocy입니다.

이번시간에는 파일업로드 기능을 추가해 보도록 하겠습니다.

파일업로드는 게시판에서 빼놓을 수 없는 기능 중 하나지만,

고려해야할 요소가 많아서 다소 복잡할 수 있습니다.

추가할 기능을 정리해보면 우선,

뷰에서는 글을쓰는 폼에 파일을 업로드할 폼을 추가해주고,

글을 조회하는 부분에서는 해당파일을 다운로드 받을 수 있게끔 보여주어야겠죠?

컨트롤러에서는 업로드 요청이 들어오면 파일이 담긴 폼데이터를 받는 특수한 형태의 객체를 사용해야합니다.

MultipartRequest 라는 녀석인데요, 이를 이용해서 기존의 request객체를 대신해 파일과 파라미터를 받아서 처리해야합니다.

마지막으로 모델에서는 데이터베이스에 추가될 파일을 저장할 공간을 고려해야하는데요,

파일을 byte 스트림을 이용해 데이터베이스에 저장할 순 있지만 보통은 그렇게 하지않고, 외부에 저장합니다.

그렇다 하더라도 파일의 위치를 저장해야하므로, 기존의 테이블에 파일정보를 담을 컬럼을 추가해주고,

쿼리들을 수정해주어야겠습니다.

그럼 본격적으로 파일업로드를 추가해 보겠습니다.

일단 글쓰기 폼을 수정하기위해 write.jsp폴더로 이동합시다. 보실 부분은 form테그의 내용입니다.

title : <input type="text" name="title" /><br/>

writer : <input type="text" name="writer" /><br/>

content : <textarea rows="10" cols="20" name="content"></textarea><br/>

file : <input type="file" name="filename"><br/>

</form>

추가된 부분이 보이시나요

폼 태그안에 enctype 속성을 추가하고 multipart/form-data 라는 값을 주었습니다.

그리고 나서 input 태그를 추가하고 type에 file로 name에 filename이라고 주었는데요,

실행시켜보시면 익숙한 파일 업로드 폼이 눈에 들어오실겁니다.

그림 1. write폼에 file form추가

그럼 그다음으로 할 일은 폼태그에 action에 등록한 insert.do에 해당하는 InsertAction.java를 수정하는 일입니다.

위에서 설명드렸듯이, 파일이 담긴 폼데이터를 처리하기위해서는 MultipartRequest 라는 객체가 필요합니다.

이를 사용하기위해, 다음의 라이브러리를 WebContent > WEB-INF > lib 폴더에 추가해주세요.

cos.jar

추가 하셨으면 이제 사용할 준비가 되었습니다.

인코딩을 변경하는 라인뒤에 MultipartRequest 객체를 선언하고 null로 초기화 해줍니다.

그리고 파일업로드를 하기위해 필요한 속성들을 정의할텐데요,

업로드될 파일의 최대 사이즈와 파일이 저장될 경로입니다.

사이즈는 10메가로 하도록 하고,

실제 파일이 업로드 될 폴더를

WebContent 폴더 안에 upload폴더를 만들어주시기바랍니다.

request.setCharacterEncoding("euc-kr");

MultipartRequest multi = null;

int sizeLimit = 10 * 1024 * 1024 ; // 10메가입니다.

String savePath = request.getRealPath("/upload"); // 파일이 업로드될 실제 tomcat 폴더의 WebContent 기준

try{

multi=new MultipartRequest(request, savePath, sizeLimit, "euc-kr", new DefaultFileRenamePolicy());

}catch (Exception e) {

e.printStackTrace();

}

String filename = multi.getFilesystemName("filename");

String title = multi.getParameter("title");

String writer = multi.getParameter("writer");

int count = 0;

String content = multi.getParameter("content");

String regip = request.getRemoteAddr();

request객체를 이용해 파라미터를 받던 구문들은 모두 multi로 대체되어야합니다.

코드설명을 해보면 우선 MultipartRequest 객체를 null로 초기화 하여 선언해준뒤,

최대 사이즈와 업로드될 경로를 정의하고 MultipartRequest 객체를 new 연산자를 사용해 생성합니다.

파라미터는 순서대로 request 객체와 경로, 파일의 최대 사이즈, 인코딩,

또하나는 객체이름 그대로 기본 이름 재명명 정책 객체입니다.

이것은 업로드된 파일이 기존에 있던 파일과 이름이 중복되었을때 filename1, filename2와 같이

뒤에 숫자를 붙이는 방식으로 처리해주는 객체입니다. import가 안되서 에러가 나셨으면

import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;

상단에 추가하시기바랍니다. (전구를 누르면 클릭으로 임포트 하실 수 있습니다.)

MultipartRequest 객체가 생성되면 이때 업로드가 처리되며 파일이 올라간 것을 확인하실 수 있습니다.

허나 아무리 새로고침을 해봐도 이클립스 내 업로드 폴더에는 업로드된 파일을 확인할 수 없는데요,

이는 실제 업로드될때 사용되는 폴더가

실제 가동되고있는 tomcat 폴더안에 있기 때문입니다.

업로드된 폴더를 확인하기위해 다음의 폴더로 이동합니다.

workspace > .metadata > .plugins > org.eclipse.wst.server.core >

tmp0 (이 폴더는 이클립스내에 생성한 서버의 갯수에 따라 다를 수 있습니다) >

wtpwebapps (버전마다 상이할 수 있음) >

board (프로젝트 명) > upload

폴더에 접근해 보셨으면 아시겠지만, 해당폴더내에는 여태까지 작업한 소스들이 들어있는것을 보실 수 있습니다.

이는 이클립스 내에서 Run as server를 통해 실행되는 결과는 결국

이클립스에서 지정한 웹서버가 런타임에 해당 폴더로 컴파일되고 복사되어 실행되는 원리입니다.

업로드된 파일을 확인 하셨으면 데이터베이스에 파일이름을 넣을 컬럼을 추가하고,

Board 빈에 변수를 추가하고, getter와 setter를 추가하고, 쿼리를 추가하는 일련의 작업들을 마찬가지로 추가해줍시다.

이에대해서는 저번시간에 추가한 regip와 마찬가지로 작업하시면 되므로 따로 설명드리지 않겠습니다.

이제 작업이 끝나셨으면 해당 파일을 다운로드하는 기능을 추가해야하는데요

우선 글을 확인하는 content.jsp 페이지에서

다운로드할 파일이름을 표시하는부분을 추가해줍시다. content.jsp의 테이블부분의 내용 밑에 추가하였습니다.

<tr>

<td colspan="8">${article.filename}</td>

</tr>

이렇게 되면 첨부파일은 표시가 됩니다.

이번 시간에는 여기까지하도록 하고 다음시간에는 다운로드기능을 추가해 보도록 하겠습니다.

수고하셨습니다.

다음장(파일 다운로드/삭제)으로 >>http://cusmaker.tistory.com/111

저작자표시

'Lecture > JSP & Java' 카테고리의 다른 글

[본격 게시판짜기 Part3.1 Spring MVC] Ajax란? (20)	2012.07.31
[본격 게시판짜기 Part2.10 Model2 MVC패턴] 파일다운로드/삭제 기능추가 (17)	2012.07.28
[본격 게시판짜기 Part2.8 Model2 MVC패턴] count기능추가 (25)	2012.07.22
[본격 게시판짜기 Part2.4 Model2 MVC패턴] Model 구성 (55)	2012.07.13
[본격 게시판짜기 Part2.3 Model2 MVC패턴] Controller구성 (77)	2012.07.12

Custom + Maker

[본격 게시판짜기 Part2.9 Model2 MVC패턴] 파일업로드 기능추가

'Lecture > JSP & Java' 카테고리의 다른 글

티스토리툴바

[본격 게시판짜기 Part2.9 Model2 MVC패턴] 파일업로드 기능추가

'Lecture > JSP & Java' 카테고리의 다른 글

관련글

티스토리툴바