더블에스 devlog

728x90

1. 파일 업로드 설정

1. pom.xml

파일업로드, 이미지 썸네일 관련 라이브러리 추가

파일 업로드 라이브러리

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

이미지 썸네일 라이브러리

<!-- https://mvnrepository.com/artifact/org.imgscalr/imgscalr-lib -->
<dependency>
    <groupId>org.imgscalr</groupId>
    <artifactId>imgscalr-lib</artifactId>
    <version>4.2</version>
</dependency>
None
2. servlet-context.xml

viewResolver bean과 파일업로드 경로를 추가

<!-- 파일업로드에 필요한 bean -->
<beans:bean id="mulitpartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 파일업로드 용량 -->
    <beans:property name="maxUploadSize" value="10485760"/>
</beans:bean>
<!-- 파일업로드를 위한 디렉토리 설정 -->
<!-- String uploadPath = new String("업로드 경로") -->
<beans:bean id="uploadPath" class="java.lang.String">
    <!-- 파일업로드 디렉토리-->
    <beans:constructor-arg value="해당디렉토리"/>
</beans:bean>
None

2. 파일 업로드 구현

1. Controller(흐름제어)

UploadController - 파일 업로드 관련 컨트롤러

@Controller
public class UploadController {

    private static final Logger logger = LoggerFactory.getLogger(UploadController.class);

    // xml에 설정된 리소스 참조
    // bean의 id가 uploadPath인 태그를 참조
    @Resource(name="uploadPath")
    String uploadPath;

    // 업로드 흐름 : 업로드 버튼클릭 => 임시디렉토리에 업로드=> 지정된 디렉토리에 저장 => 파일정보가 file에 저장
    @RequestMapping(value="/upload/uploadForm", method=RequestMethod.GET)
    public void uplodaForm(){
        // upload/uploadForm.jsp(업로드 페이지)로 포워딩
    }

    @RequestMapping(value="/upload/uploadForm", method=RequestMethod.POST)
    public ModelAndView uplodaForm(MultipartFile file, ModelAndView mav) throws Exception{

        logger.info("파일이름 :"+file.getOriginalFilename());
        logger.info("파일크기 : "+file.getSize());
        logger.info("컨텐트 타입 : "+file.getContentType());

        String savedName = file.getOriginalFilename();

        File target = new File(uploadPath, savedName);

        // 임시디렉토리에 저장된 업로드된 파일을 지정된 디렉토리로 복사
        // FileCopyUtils.copy(바이트배열, 파일객체)
        FileCopyUtils.copy(file.getBytes(), target);

        mav.setViewName("upload/uploadResult");
        mav.addObject("savedName", savedName);

        return mav; // uploadResult.jsp(결과화면)로 포워딩
    }
}
None
2. View(파일업로드 페이지, 업로드 결과 페이지)
파일 업로드 페이지

form태그 속성에 enctype="multipart/form-data"을 추가

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="../include/header.jsp" %>
</head>
<body>
<%@ include file="../include/menu.jsp" %>
    <!-- enctype="multipart/form-data" 파일업로드 필수 옵션 -->
    <!-- application/x-www-form-urlencoded 기본옵션 -->
    <form action="${path}/upload/uploadForm" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" value="업로드">    
    </form>
</body>
</html>
None
파일 업로드 결과 페이지
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="../include/header.jsp" %>
</head>
<body>
<%@ include file="../include/menu.jsp" %>
    파일이 업로드 되었습니다.
    파일명 : ${savedName}
</body>
</html>
None
구현화면

파일 업로드 페이지(업로드할 이미지 파일 선택)

uploadpage

파일 업로드 페이지(선택한 파일 업로드)

uploadpage2

파일 업로드 결과 페이지(업로드 결과 페이지)

uploadResultpage

파일 업로드 디렉토리(업로드한 파일의 경로에서 업로드 처리가 제대로 되었는지 확인)

uploadDirectory

3. 콘솔 확인

console


이 글은 본 저작자 표시, 비영리, 변경 금지 규칙 하에 배포할 수 있습니다. 자세한 내용은 Creative Commons 라이선스를 확인하세요.

댓글을 사용할 수 없습니다.

티스토리툴바