9_ws_(파일업로드)

글쓰기클릭 했을 경우 insertForm 으로 이동

#BoardController에서 insertForm을 받아줌

else if(command.equals("/insertForm")) {
	path = "/WEB-INF/views/board/boardInsert.jsp";
    view = request.getRequestDispatcher(path);
    view.forward(request. response);
}

#BoardInsert.jsp

<form action="<%=request.getContextPath()%>/board/insert" method="post" 
				  enctype="multipart/form-data" role="form" onsubmit="return validate();">
// 파일업로드시 꼭 enctype 필요
// enctype="multipart/form-data" 업로드시 집합으로 모아 업로드

<div id="fileArea">
  <!-- multiple 속성 
  - input 요소 하나에 둘 이상의 값을 입력할 수 있음을 명시
  -->
  <input type="file" id="img1" 
  name="img1" onchange="LoadImg(this,1)"> 
  <!-- 바뀌엇을때 LoadImg함수실행 //this는 input태그 요소자체-->
  <input type="file" id="img2"
  name="img2" onchange="LoadImg(this,2)"> 
  <input type="file" id="img3"
  name="img3" onchange="LoadImg(this,3)"> 
  <input type="file" id="img4"
	name="img4" onchange="LoadImg(this,4)">
</div>

// 파일 이미지 넣기
// 이미지 공간을 클릭할 때 파일 첨부 창이 뜨도록 설정하는 함수
// jquery ready()함수
$(function () {
	// 파일 선택 버튼이 있는 영역을 보이지 않게함
    $("#fileArea").hide();
    
    // 이미지 영역 클릭 시 파일 첨부창 띄우기
    $("#titleImgArea").click(function(){
    	$("#img1").click(); //매개변수가없을씨 클릭해라가됨
    });
    $("#contentImgArea1").click(function(){
    	$("#img2").click();
    });
    $("#contentImgArea2").click(function(){
		$("#img3").click(); 
    });
	$("#contentImgArea3").click(function(){
		$("#img4").click(); 
	});
});

// 각각의 영역에 파일을 첨부 했을 경우 미리 보기가 가능하도록 하는 함수
function LoadImg(value, num) {
	// 파일업로드 시 업로드된 파일의 경로는
    // 해당 요소에 files라는 배열이 생성되며 저장됨
    // true, false 반환
    if(value.files && value.files[0]) {
    // 파일이 존재하고 첫번째 값이 있으냐? // 파일이 선택된 경우
    // 경로만 읽는과정(브라우저에 파일올라옴)
    	var reader = new FileReader();
        // 직접읽는과정
        reader.onload = function(e){
        // 파일을 다 읽으면 이벤트를 실행해라
        	switch(num){
            case 1 : $("#titleImg").prop("src", e.target.result); break;
            							// 이벤트가 실행된(이미지)주소 = result
            case 2 : $("#contentImg1").prop("src", e.target.result); break;
            case 3 : $("#contentImg2").prop("src", e.target.result); break;
            case 4 : $("#contentImg3").prop("src", e.target.result); break;
            
            }
        }
        // file에는 다양한 정보가 들어가있음(위치 크기등)
        // file에서 내용(Content)을 읽어옴
        // + base64 인코딩된 경로를 반환
        // base64(는 2진법을 64진법으로 변환)
        reader.readAsDataURL(value.files[0]);
    }
}     

#action="<%=request.getContextPath()%>/board/insert"로 보낸 서블릿을 받아줄 BoardController 작성

// 게시글 등록용 Controller
else if(command.equals("/insert")) {
	// form 전송 시 multipart/form-data로 전송하는 경우
    // 기존처럼 request.getParameter()를 이용하여
    // 입력값을 전달받을 수 없음.
    // -> MultipartRequest를 사용해야 함
    //		-> cos.jar 라이브러리 추가 필요
    //			( http://www.servlets.com/ ) 에서 다운받아 library폴더에 삽입
    try {
    	// cos.jar 설치 후 ServletFileUpload를 불러올수 있음
        if(ServletFileUpload.isMultipartContent(request)) {
        // 요청(request)가 multipart/form-data가 포함되어있냐?
        
        	// 1_1. 전송 파일의 용량 제한 : 10MB로 제한
            // B -> KB -> MB -> GB -> TB
            int maxSize = 1024 * 1024 * 10;
            
            // 1_2. 웹 서버 컨테이너 경로 추출
            //		-> WebContent 경로 추출
            String root = request.getSession().getServletContext().getRealPath("/");
            // root = WebContent/
            // 1_3. 업로드 된 파일이 저장될 경로 지정
            String savePath = root + "resources/uploadImages/";
            
            // 2. 파일명 변환 작업
            // 여러사람이 같은이름으로 파일올릴경우 덮어씌어져 서버에 데이터 회손이 일어남
            // + 파일명이 한글 또는 특수문자가 포함되면 서버 종류에 따라 문제가 발생할수 있어서
            
            // cos.jar -> DefaultFileRenamePolicy를 제공해 주지만
            // 나만의 파일명 규칙을 적용하기 위해서
            // 별도의 MyFileRenamePolice 작성
            
            // 3. MultipartRequest 객체 생성
            //    -> 객체가 생성되는 순간에
            //    -> request, 파일경로 지정, 최대 파일 크기 지정
            //		문자 인코딩 지정
            //	  -> * 변경된 파일명으로 지정된 경로로 파일이 저장됨
            MultipartRequest multiRequest = 
            	new MultipartRequest(request, savePath, maxSize,
                				"UTF-8", new MyFileRenamePolicy());
			
            // 4. 서버에 저장된 파일의 원래 파일명, 이전 파일명을
            // 	  DB에 전달하기 위한 ArrayList 생성
            
            // 저장된 파일(변경된 파일명)
            ArrayList<String> saveFiles = new ArrayList<String>();
            
            // 원본 파일명
            ArrayList<String> originFiles = new ArrayList<String>();
            
            // 전달된 요청(multiRequest)에서 파일 리스트 정보를 얻어와
            // 저장된 파일명, 원래 파일명 각 ArrayList에 추가함
            
            // iterator 예전 버전
            Enumeration<String> files = multiRequest.getFileNames();
            
            while(files.hasMoreElements()) {
            	// 다음 요소가 더 있냐?
                
                // 업로드된 파일은 역순으로 전달됨
                String name = files.nextElement();
                
                if(multiRequest.getFilesystemName(name) != null) {
                	// getFilesystemName(key) : rename된 파일명 얻어오기
                    saveFiles.add(multiRequest.getFilesystemName(name));
                    originFiles.add(multiRequest.getOriginalFileName(name));
                }
            }
            
            // 5. 파일 외에 나머지 게시글 입력값 얻어오기
            String boardTitle = multiRequest.getParameter("title");
            String boardContent = multiRequest.getParameter("content");
            String boardCategory = multiRequest.getParameter("category");
            // 오라클에서는 숫자만 있는 스트링이면 알아서 int로 바꿔줘서 형변환 X
            
            Board board = new Board(boardTitle, boardContent, boardCategory);
            
            // 회원 번호를 session에서 얻어옴
            // session은 request에서만 얻어올 수 있음
            Member loginMember 
				= (Member)request.getSession().getAttribute("loginMember");
                
            int boardWriter = loginMember.getMemberNo();
            
            // 6. Attachment VO를 생성한 후
            //	  Attachment들을 저장할 List를 생성하여
            //	  파일 경로, 파일 원본명, 변경된 파일명을 세팅
            
            ArrayList<Attachment> fList = new ArrayList<Attachment>();
            
            // 파일정보는 역순으로 전달되므로 ,
            // 반복문을 역으로 수행하여 원래 순서대로 저장
            for(int i = originFiles.size()-1; i>=0 i--) {
            	Attachment file = new Attachment();
                file.setFilePath(savePath);
                file.setFileOriginName(originFiles.get(i));
                file.setFileChangeName(saveFiles.get(i));
                
                // 썸네일 이미지는 fileLevel 0으로
                // 나머지 이미지에는 fileLevel 1로부여
                if( (i == originFiles.size()-1)
                	&& multiRequest.getFilesystemName("img1") != null) {
                    	// rename된경우는 파일이 있는 경우
                    file.setFileLevel(0);
                } else {
                	file.setFileLevel(1);
                }
                
                fList.add(file);
           }
           
           int result = boardService.insertBoard(board, boardWriter, fList);
           
           if(result>0) msg = "게시글 등록 성공";
		   else		 msg = "게시글 등록 실패";
					
		   request.getSession().setAttribute("msg", msg);
		   response.sendRedirect("list");
       }
   } catch (Exception e) {
   	ExceptionForward.errorPage(request, response, "게시글 등록", e);
   }
}