게시판 파일 입력하기

메이븐 기반 웹프로젝트

게시판에 파일 입력하기

 

• pom.xml

⇒ MultipartResolver를 사용하기 위해 Apache Commons FileUpload를 pom.xml 디펜던시에 추가

<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>

 

 

• jsp

        <!-- 파일업로드는 multipart/form-data -->
        <form action="" id="frm" method="post" enctype="multipart/form-data">
            <br/><br/>
            <div class="form-group">
                제목
                <input type="text" class="form-control" id="title" name="title">
                <div id="title_check"></div>
            </div>
            
            <div class="form-group">
                파일 
                <input type="file" class="form-control" id="file" name="file">
            </div>
            
            <div class="form-group">
                내용 
                <textarea class="form-control" rows="10" id="content" name="content"></textarea>
                <div id="content_check"></div>
            </div>
            
            <div class="text-center">
                <a id="sendBtn" class="btn btn-primary">작성</a>
                <a id="resetBtn" class="btn btn-danger">취소</a>
            </div>
        </form>

 

 

• javascript

//작성버튼을 눌렀을 경우
    $("#sendBtn").click(function(){
        var formData = new FormData($("#frm")[0]);
        
        $.ajax({
            url: "boardInsert.do",
            type: "post",
            enctype: "multipart/form-data",
            data: formData,
            processData: false,
            contentType: false,
            success: function(val){
                if(val == 1){
                    alert("글을 입력하였습니다."); location.href="/mvnschool/board.do";
                }else{
                    alert("전송 실패");
                }
            },
            error: function(e){
                alert(e);
            }
        })//ajax
    }); //sendBtn

 

 

 

• Controller

⇒ 컨트롤러에서 부를때 그냥 HttpServletRequest로 부르지말고 MultipartHttpServletRequest로 불러야함

⇒ MultipartFile 객체를 생성하여 MultipartHttpServletRequest의 getFile메소드로 불러온 파일을 저장

⇒ 저장할 경로 지정

⇒ 가져온 원본파일의 이름에 중복방지를 위해 time을 추가하고 지정한 경로에 파일 생성

⇒ db에는 그 파일의 이름이 저장됨

    @RequestMapping(value="/boardInsert.do", method = RequestMethod.POST)
    @ResponseBody
    public int boardInsert(HttpServletRequest request, MultipartHttpServletRequest multiRequest,
            @ModelAttribute Board board) throws IllegalStateException, IOException{
        //글쓴이 정보 생성
        HttpSession session = request.getSession();
        String userno = (String)session.getAttribute("userno");
        User user = userDAO.userView(userno);
        String name = user.getName();
 
        //board에 글쓴이 정보를 세팅
        board.setUserno(userno);
        board.setName(name);
        
        MultipartFile mf = null;
        //파일을 업로드 하지 않는다면 fileupload 컬럼에는 그냥 null이 입력됨
        if(multiRequest.getFile("file").getSize() != 0){
            mf = multiRequest.getFile("file"); //input file로 넘어온 값
            
            //경로 지정
            String path = "D:\\kj\\mvnschool\\webapp\\WEB-INF\\upload";
            File fileDir = new File(path);
            if(!fileDir.exists()){
                fileDir.mkdirs();
            }
 
            //중복방지를 위해 time 추가
            long time = System.currentTimeMillis();
            String originFileName = mf.getOriginalFilename(); //원본 파일명
            String saveFileName = String.format("%d_%s", time, originFileName); //저장 파일명
            
            //파일 생성
            mf.transferTo(new File(path, saveFileName)); 
 
            board.setFileupload(saveFileName);
        }
        
        int result = boardDAO.boardInsert(board);
        
        return result;
    }

 

 

• dao