국비 교육 71일차 - 파일 업로드

우리 조 프로젝트 역시 게시판을 만들었어야 했는데, 가장 중요하게 생각했던 부분이 바로 사진 공유 게시판 기능이었다.

 

사용자가 직접 사진을 올리면 그 저장한 사진을 바로 띄울 수 있게 하고 싶었기 때문에, 파일 업로드 기능을 반드시 사용해야 했다. 

 

일단 게시판 view 부분은 이렇게 작성했다. 

			
		 <form method=post action="../board/board_insert_ok.do"
	     	enctype="multipart/form-data">
            <div class="blog_details">
           		<h2>글쓰기</h2>
           		
		        	<table>
		            <tr>
		                <th width=10% class="text">제목</th>
		                <td class="border"><input type=text name=title id="penulis" autocomplete="off" size=50></td>
		            </tr>
		            <tr>
		                <th width=10%  class="text">내용</th>
		                <td class="border"><textarea name=content id="berita" cols="80" rows="10" autocomplete="off"></textarea></td>
		            </tr>
		            <tr>
		                <th width=10%  class="text">태그</th>
		                <td class="border"><input type=text name=tag id="judul" autocomplete="off"></td>
		            </tr>
		            <tr>
		                <th width=10%  class="text">장소</th>
		                
		                <td><select name=loc class="loc">
		                 <option id="loc1">광화문</option>
		                 <option id="loc2">명동</option>
		                 <option id="loc3">동대문</option>
		                 <option id="loc4">홍대</option>
		                 <option id="loc5">여의도</option>
		                 <option id="loc6">이태원</option>
		                 <option id="loc7">강남</option>
		                 <option id="loc8">잠실</option>
		                 <option id="loc9">기타</option>
		                </select></td>
		            </tr>
		            
		            <tr>
		             <th width=10% class="text">이미지 첨부</th>
		             <td>
		              <input type=file name=upload size=20>
		              <div id="pictures"> </div>
		             </td>
		            </tr>
		            <!-- <tr>
		                <td class="text">사진</td>
		                <td class="border"><input type="text" name="pic" id="judul"></td>
		            </tr> -->
		        </table>
		        <div style="height:50px"></div>
		         <button class="ripple" type="submit">쓰기</button>
		         <button class="ripple" onclick="javascript:history.back()">취소</button>
		        </div> <!-- blog_details -->      
    			</form>
    			

 

 

 

이런 창으로 파일을 띄울수 있게 만들었다. 

 

form태그로 값을 넘기는데, 이제 여기서 중요한 것은 

<form method=post action="../board/board_insert_ok.do"
	     	enctype="multipart/form-data">

 꼭 이렇게 enctype을 multipart/form-data를 주어야 한다. 그냥 텍스트 값을 넘길때는 써주지 않아도 되지만, 첨부파일이 넘어갈때는 반드시 적어주어야 한다. (form에서 post 방식으로 넘어갈때 사용가능하다)

 

그러면 이 받아온 값을 어떻게 처리해주고 있는지 Model에서 확인해보면

 

// 게시글 올리기
	@RequestMapping("board/board_insert_ok.do")
	public String board_insert_ok(HttpServletRequest request, HttpServletResponse response)
	{
		try
		{
			request.setCharacterEncoding("UTF-8");
			String path="C:\\Users\\SIST\\eclipse-workspace\\.metadata\\.plugins\\org.eclipse.wst.server.core\\tmp0\\wtpwebapps\\TeamProject1\\upload\\";
			int size=1024*1024*100;
			String enctype="UTF-8";
			// 업로드
			MultipartRequest mr=new MultipartRequest(request, path, size, enctype,
					new DefaultFileRenamePolicy());
			// 데이터 받기
			
			String content=mr.getParameter("content");
			String title=mr.getParameter("title");
			String tag=mr.getParameter("tag");
			String loc=mr.getParameter("loc");
			HttpSession session=request.getSession();
			String id=(String)session.getAttribute("id");
			String name=(String)session.getAttribute("name");
			
			
			
			BoardVO vo=new BoardVO();
			vo.setPb_picContent(content);
			vo.setPb_picTitle(title);
			vo.setPb_picTag(tag);
			vo.setUser_id(id);
			vo.setUser_name(name);
			vo.setPb_picLoc(loc);
			
			String filename=mr.getOriginalFileName("upload");
			if(filename==null)
			{
				vo.setFilename("");
				vo.setFilesize(0);
			}
			else
			{
				File file=new File(path+filename);
				vo.setFilename(filename);
				vo.setFilesize((int)file.length());
				
			}
			String pic=filename;
			vo.setPb_pic(pic);
			BoardDAO dao=BoardDAO.newInstance();
			dao.boardInsertData(vo);
			
		} catch (Exception e) {}
		return "redirect:../board/board_main.do";
	}

 우선 post방식으로 받아온 파일명 자체에 한글이 있을수도 있으니, 무조건 try, catch절 안에서 수행할 수 있도록 코딩을 해준다. 

 

MultipartRequest 객체를 이용해서 파일을 업로드 해줄 것이기 때문에, 파일을 저장할 경로, 파일 사이즈, 인코딩 타입을 먼저 설정해준뒤 이 변수들을 사용하여 객체를 생성해준다. 

 

생성된 객체에 name으로 넘겨준 데이터값들을 받아온다. file의 경우 첨부하지 않았을 가능성도 있기 때문에, 조건문으로 예외처리를 해준다. 

 

이번 프로젝트의 경우 사용자가 업로드한 사진파일을 받아 서버컴퓨터에 저장하고, 그 이후에 사진을 띄울때 서버컴퓨터에 저장된 것을 불러와주게 했다. 

 

그렇기 때문에 서버 컴퓨터에 저장될 폴더 경로명에 파일 명을 문자열 결합으로 처리한뒤, poster변수에 담아 데이터베이스에 저장을 해주고 마무리 해줬다. 

 

이렇게 되면 이후에 poster변수에 저장된 경로명을 읽어와서 사진 파일이 화면에 띄워진다. 

 

 실제로 우리 조원들이 저장해서 글을 쓰고 올린 게시물이다.