서버에서는 파일을 저장할 때 반드시 고려해야 하는 사항은 다음과 같다.

- 파일 이름의 중복 문제

- 파일의 저장 경로에 대한 문제

- 원본 파일을 그대로 보여주는 경우 브라우저에서 보여지는 파일의 크기 문제

- FAT32 : 단일 파일 4GB, 최대 볼륨32GB, 볼륨당 파일 수 4,117,920개, 폴더당 파일수 65,534 개

- NTFS : 단일 파일 16TB,  최대 볼륨 256TB, 볼륨당 파일 수 4,294,967,295 개,  폴더당 파일 수 4,294,967,295 개

대부분 프로젝트에서는 사용자가 업로드한 이미지 파일은 썸네일(thumbnail) 이미지라는 원본 이미지 파일의 축소본(썸네일 이미지)

을 만들어서 전송한다. 물론, 이러한 작업을 하는 가장 중요한 이유는 서버에서 최소한의 데이터를 전송하기 위해서이다.

● 파일 업로드용 클래스 설계하기

1) 자동적인 폴더의 생성이 가능하며, 

2) 파일 저장은 UUID를 이용해서 처리하고,

3) 썸네일 이미지를 생성하는 기능이 처리

● 썸네일 생성하기

업로드 되는 파일은 크게 브라우저에서 보여지는 이미지 종류의 파일과 사용자가 다운로드 하는 형태의 파일로 구분될 수 있다.

이미지 타입의 파일 : JPG, GIF ,PNG, JPEG (BMP 는 흔히 사용되지 않으므로 일반 파일로 간주)

다운로드 타입의 파일 : 이미지 타입의 파일을 제외한 모든 종류

 파일 저장 하기 

프로젝트 밖에 

년월일 별로 폴더가 생성된 것을 볼 수 있다.

서버내 디렉토리 주소로 설정 하면 된다.

servlet-context.xml

	<beans:bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
	  <beans:property name="maxUploadSize"   value="10485760" />
	</beans:bean>
	
	<!-- 서버의 파일 저장 경로 설정 -->
	<beans:bean id="uploadPath" class="java.lang.String">
	 <beans:constructor-arg  value="D:\dev\spring_simple_blog\.metadata\.plugins\org.eclipse.wst.server.core\tmp1\wtpwebapps\upload"  />
	</beans:bean>
	

* 라이브러리 설정

http://mvnrepository.com/artifact/commons-fileupload/commons-fileupload

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

Imgscalr A Java Image Scaling Library

<!-- https://mvnrepository.com/artifact/org.imgscalr/imgscalr-lib -->
<dependency>
    <groupId>org.imgscalr</groupId>
    <artifactId>imgscalr-lib</artifactId>
    <version>4.2</version>
</dependency>

UploadFileUtils

package config.uploadfile;

import java.awt.image.BufferedImage;
import java.io.File;
import java.text.DecimalFormat;
import java.util.Calendar;
import java.util.UUID;

import javax.imageio.ImageIO;

import org.imgscalr.Scalr;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.util.FileCopyUtils;


public class UploadFileUtils {
	
	private static final Logger logger=LoggerFactory.getLogger(UploadFileUtils.class);

	private static Integer WIDTH_SIZE=100;
	
	public static Integer getWIDTH_SIZE() {
		return WIDTH_SIZE;
	}

	public static void setWIDTH_SIZE(Integer wIDTH_SIZE) {
		WIDTH_SIZE = wIDTH_SIZE;
	}

	//1.파일의 저장 경로(uploadPath), 2.원본 파일의 이름(originalName), 3.파일 데이터(byte[])
	public static String uploadFile(String uploadPath, String originalName, byte[] fileData) throws Exception{
		
		
	  //★ 1. 고유값 생성
	  UUID uid =UUID.randomUUID();
	  String savedName=uid.toString()+"_"+originalName;
	  		
	  //★ 2. 년/월/일' 정보 생성
	  String savedPath=calcPath(uploadPath);
		
	  //★ 3. 원본파일 저장
	  File target =new File(uploadPath+savedPath, savedName);
	  FileCopyUtils.copy(fileData, target);
		
		
	  //★ 4. 이미지 일경우 썸네일 이미지 생성 후 url 주소로 반환
	  String formatName=originalName.substring(originalName.lastIndexOf(".")+1);
	  String uploadedFileName=null;
	  
	  if(MediaUtils.getMediaType(formatName)!=null){
		  //이미지일 경우 썸네일 생성 후 이미지 이름 반환 ( 경로+년월일+s_이름)
		  uploadedFileName=makeThumbnail(uploadPath, savedPath, savedName);
	  }else{
		  uploadedFileName=makeIcon(uploadPath, savedPath, savedName);
	  } 
	  
	  // 파일 경로를  -> url 경로로 변경해서 반환
	  return uploadedFileName;	
	}
	
	// 이미지가 아닐경우  단지 파일 경로를 -> url 경로로 변경해서 반환
	private static String makeIcon(String uploadPath, String savedPath, String savedName) {
		String iconName=uploadPath+savedPath+File.separator+savedName;
		return iconName.substring(uploadPath.length()).replace(File.separatorChar, '/');
	}


	//파일이 저장될  '년/월/일' 정보 생성
	private static String calcPath(String uploadPath){	
		Calendar cal =Calendar.getInstance();
		// 역슬래시 + 2017
		String yearPath=File.separator + cal.get(Calendar.YEAR);
		
		//  /2017 +/+ 10  한자리 월 일경우 01, 02 형식으로 포멧
		String monthPath=yearPath + File.separator + new DecimalFormat("00").format(cal.get(Calendar.MONTH)+1);
		
		// /2017/10 +/ + 22 
		String datePath = monthPath+ File.separator+ new DecimalFormat("00").format(cal.get(Calendar.DATE));
		
		//년월일 폴더 생성하기
		makeDir(uploadPath, yearPath, monthPath, datePath);
		
		logger.info(" datePath - {}", datePath);
		
		return datePath;
	}

	
	// 실질 적인 날짜 폴더 생성
	private static void makeDir(String uploadPath, String... paths){	
		if(new File(paths[paths.length-1]).exists()){
			//년 월 일 에서 일 배열 paths 에서 paths -1 은 일  즉 해당일의 폴더가 존재하면 return
			return ;
		}
		
		for(String path :paths){
			File dirPath =new File(uploadPath+path);
			if(!dirPath.exists()){
				//년 월일에 대한 해당 폴더가 존재하지 않으면 폴더 생성
				dirPath.mkdir();
			}
		}
		
	}
	
	//썸네일 이미지 생성하기
	// 1.파일 경로 2. 년월일 경로, 3. 파일 이름 
	private static String makeThumbnail(String uploadPath, String path, String fileName) throws Exception{
		// 파일 존재하는 이미지를 메모리상 이미지에 올려 붙인다. 즉 메모리에 로딩시킨다.
		BufferedImage sourceImg= ImageIO.read(new File(uploadPath+path, fileName));
		
		//메모리상 이미지를 정해진 크기에 맞게 복사한다.
		BufferedImage destImage=Scalr.resize(sourceImg, Scalr.Method.AUTOMATIC,
				Scalr.Mode.FIT_TO_HEIGHT, WIDTH_SIZE);
		
		//썸네일 이미지 이름을 정한다. 썸네일 이미지를 앞에 s_ 붙인다.
		String thumbnailName=uploadPath+path+File.separator+"s_"+fileName;
		
		// 파일 경로의 객체를 생성한다.
		File newFile=new File(thumbnailName);
		
		// 경로의 마지막 에 . 으로 중심으로 분리해서 .jpg, png, jpeg gif 의 문자를 추출한다.  
		String formatName=fileName.substring(fileName.lastIndexOf(".")+1);
		
		//실질적인 썸네일 이미지를 복사한다.  
		ImageIO.write(destImage, formatName.toUpperCase(), newFile);
	
		// 파일 경로인 역슬러시를 url 의 경로인 슬러시로 변경해서 해서 반환시킨다.
		return thumbnailName.substring(uploadPath.length()).replace(File.separatorChar, '/');
	}
	
	
	
	
	
}

MediaUtils

package config.uploadfile;

import java.util.HashMap;
import java.util.Map;

import org.springframework.http.MediaType;

public class MediaUtils {

	private static Map<String, MediaType> mediaMap;
	
	static {
		mediaMap=new HashMap<String, MediaType>();
		mediaMap.put("JPEG", MediaType.IMAGE_JPEG);
		mediaMap.put("JPG", MediaType.IMAGE_JPEG);
		mediaMap.put("GIF", MediaType.IMAGE_GIF);
		mediaMap.put("PNG", MediaType.IMAGE_PNG);
	}
	
	public static MediaType getMediaType(String type){
		return mediaMap.get(type.toUpperCase());
	}
	
}

UploadController

	    
    //년월일 폴더로 분리후 이미지일 경우 썸네일 이미지 생성
    @ResponseBody
    @RequestMapping(value="/test/uploadAjax2", method=RequestMethod.POST, produces="text/plain;charset=UTF-8")
    public ResponseEntity<String> uploadAjax2(MultipartFile file) throws Exception{
        logger.info("originalName ,  {} ",  file.getOriginalFilename());    
        
        //사이즈 가로 설정
        UploadFileUtils.setWIDTH_SIZE(200);
        
        String uploadFile=UploadFileUtils.uploadFile(uploadPath, file.getOriginalFilename(), file.getBytes());
        logger.info("파일 저장후 반환 값 - ,  {} ",  uploadFile);
        return new ResponseEntity<String>(uploadFile, HttpStatus.CREATED);
    }
	
	

uploadAjax.jsp

<%@ 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>
<style type="text/css">
.fileDrop{

	width:100%;
	height:200px;
	border:1px dotted blue;

}

small{
	margin-left:3px;
	font-weight:bold;
	color:gray;
}

</style>
</head>
<body>



<h3>Ajax File Upload</h3>
<div class="fileDrop"></div>
<div class="uploadedList"></div>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>



</body>
</html>

<script>
$(".fileDrop").on("dragenter dragover", function(event){
	event.preventDefault();
});

$(".fileDrop").on("drop", function(event){
	event.preventDefault();
	
	var files=event.originalEvent.dataTransfer.files;
	
	var file=files[0];
	
	console.log(file);
	var formData=new FormData();
	formData.append("file", file);

	$.ajax({
		
		url:'/test/uploadAjax2',
		data:formData,
		dataType:'text',
		processData:false,
		contentType:false,
		type:'POST',
		success:function(data){
			alert(data);	
		}
	});
	
		
});

</script>

만일 저장하는 파일이 이미지 타입이 아닌 파일이라면, 결과 메시지에  's_' 로 시작되지 않고, 저장 경로에도 파일은 하나만 생성된다.

콘솔에 출력되는 값은 다음과 같다. 

이미지인경우

INFO : test.controller.UploadController - originalName ,  1.jpg 
INFO : config.uploadfile.UploadFileUtils -  datePath - \2017\10\22
INFO : test.controller.UploadController - 파일 저장후 반환 값 - ,  /2017/10/22/s_550eb43a-0369-4972-be98-9a9e093897dd_1.jpg 

일반 파일인 경우

INFO : test.controller.UploadController - originalName ,  welcome.jsp 
INFO : config.uploadfile.UploadFileUtils -  datePath - \2017\10\22
INFO : test.controller.UploadController - 파일 저장후 반환 값 - ,  /2017/10/22/26a7c77b-f7f7-4c6b-b559-58b0ed156bc7_welcome.jsp 

보안

 보안을 위해 이미지만 허용하거나 특정 파일만 허용가능하도록 해야 한다.

그래서 다음과 같이 클래스를 만들고 변경하였다.

추가

UploadSecurity

package test.controller;

import org.springframework.web.multipart.MultipartFile;

public class UploadSecurity {

	public static boolean check(MultipartFile uploadedFile) {

		if (!uploadedFile.isEmpty()) {

			String fileName = uploadedFile.getOriginalFilename();

			// jpg, jpeg, png, gif, 만 업로드 되도록 수정
			if (fileName.toLowerCase().endsWith(".jpg") || fileName.toLowerCase().endsWith(".jpeg")
					|| fileName.toLowerCase().endsWith(".png") || fileName.toLowerCase().endsWith(".gif")) {
				return true;
			}
		}

		return false;
	}

}

controller

	//년월일 폴더로 분리후 이미지일 경우 썸네일 이미지 생성
	@ResponseBody
	@RequestMapping(value="/test/uploadAjax2", method=RequestMethod.POST, produces="text/plain;charset=UTF-8")
	public ResponseEntity<String> uploadAjax2(MultipartFile file) throws Exception{
		logger.info("originalName ,  {} ",  file.getOriginalFilename());	
		
		 String uploadFile="";
		// 보안상 , jpg, jpeg, png, gif, 만 업로드 되도록 수정 
		if(UploadSecurity.check(file)){
			//사이즈 가로 설정
			UploadFileUtils.setWIDTH_SIZE(200);
				
			uploadFile=UploadFileUtils.uploadFile(uploadPath, file.getOriginalFilename(), file.getBytes());
		}else{
			uploadFile="허용되지 않은 파일 입니다.";
		}
		
		logger.info("파일 저장후 반환 값 - ,  {} ",  uploadFile);
		return new ResponseEntity<String>(uploadFile, HttpStatus.CREATED);
	}
	

 파일 화면에 표시하기 

utils 또는 cofig 패키지에 다음 클래스를 만든다.

UploadFileDisplay

package config.uploadfile;

import java.io.FileInputStream;
import java.io.InputStream;

import org.apache.commons.io.IOUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;

//전송된 파일을 화면에 표시하는 클래스

public class UploadFileDisplay {
	
	private static final Logger logger = LoggerFactory.getLogger(UploadFileDisplay.class);
	
	private static UploadFileDisplay instance;
	
	//싱글톤
	private UploadFileDisplay (){
		
	}

	public static UploadFileDisplay getInstance(){
		if(instance==null){
			instance=new UploadFileDisplay();
		}
		return instance;
	}
	
	
	public ResponseEntity<byte[]> disPlay(String fileName, String uploadPath) throws Exception{
		//fileName 은 /년/월/일/파일명의 형태로 입력을 받는다.
		
		InputStream in=null;
		//ResponseEntity<byte[]> 로 결과는 실제로 파일의 데이터가 된다.
		//컨트롤에서 @ResponseBody 를 이용해야 하며 
		//byte[] 데이터가 그대로 전송될 것임을 명시한다.
		ResponseEntity<byte[]> entity=null;
				
		logger.info("File NAME : "+ fileName);
		
		try{
			String formatName =fileName.substring(fileName.lastIndexOf(".")+1);
			
			MediaType mType =MediaUtils.getMediaType(formatName);
			
			HttpHeaders headers =new HttpHeaders();
			//   경로 +/년/월/일 /파일이름
			in =new FileInputStream(uploadPath+fileName);
			if(mType!=null){
				//이미지인 경우 
				headers.setContentType(mType);
			}else{
				//이미지가 아닌 경우
				//MIME 타입을 다운로드 용으로 사용되는 'application/octet-stream 으로 지정한다.
				//브라우저는 이 MIME 타입을 보고 사용자에게 자동으로 다운로드 창을 열어 준다.
				
				fileName=fileName.substring(fileName.indexOf("_")+1);
				//한글 깨짐 방지 설정

				//다운로드 할 때 사용자에게 보이는 파일의 이름이므로 한글 처리를 해서
				// 전송합니다. 한글 파일의 경우 다운로드 하면 파일의 이름이 깨져서
				// 나오기 반드시 인코딩 처리를 할 필요가 있다.
				String attach="\""+new String(fileName.getBytes("UTF-8"), "ISO-8859-1")+"\"";
				headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
				headers.add("Content-Disposition", "attachment; filename="+attach);				
			}
			
			//실제로 데이터를 읽는 부분은 commons 라이브러리의 기능을 활용해서 대상
			// 파일에서 데이터를 읽어내는 IOUtils.toByteArray() 이다.
			entity=new ResponseEntity<byte[]>(IOUtils.toByteArray(in), headers, HttpStatus.CREATED);
			
		}catch(Exception e){
			e.printStackTrace();
			entity=new ResponseEntity<byte[]>(HttpStatus.BAD_REQUEST);
		}finally{
			in.close();
		}
		
		return entity;
	}
	
	
}

controller

	@ResponseBody
	@RequestMapping("/displayFile")
	public ResponseEntity<byte[]> displayFile(String fileName) throws Exception{
		UploadFileDisplay display=UploadFileDisplay.getInstance();
		
		return display.disPlay(fileName, uploadPath);
	}
	
	

테스트

테스트 먼저 이미지와 일반 파일을 업로드 시킨다.

콘솔창에 찍히는 파일 주소를 url 상에 다음과 같이 입력해 본다.

콘솔창

INFO : test.controller.UploadController - 파일 저장후 반환 값 - ,  /2017/10/22/1c9c0b2a-a16f-44fa-b548-f4f5f74d4ff8_최준호.hwp 
 

url 입력 값:

http://localhost:7070/displayFile?fileName=/2017/10/22/s_24bef728-c974-49c7-b2283d3754d3be0_%EC%9D%B4%EB%AF%B8%EC%A7%80%202.png

http://localhost:7070/displayFile?fileName=/2017/10/22/1c9c0b2a-a16f-44fa-b548-f4f5f74d4ff8_최준호.hwp

이미지 표시 , 파일 링크 처리

<script>

$(function(){
	

	
	
	$(".fileDrop").on("dragenter dragover", function(event){
		event.preventDefault();
	});

	$(".fileDrop").on("drop", function(event){
		event.preventDefault();
		
		var files=event.originalEvent.dataTransfer.files;
		
		var file=files[0];
		
		console.log(file);
		var formData=new FormData();
		formData.append("file", file);

		$.ajax({
			
			url:'/test/uploadAjax2',
			data:formData,
			dataType:'text',
			processData:false,
			contentType:false,
			type:'POST',
			success:function(data){
				
				var str="";
				
				if(checkImageType(data)){
					
					str="<div>"
					 +"<a href='/displayFile?fileName="+getImageLink(data)+"' ><img src='/displayFile?fileName="+data+"'/>"
					  +getOriginalName(data)+"</a>";		 
				}else{
					str ="<div>"+getOriginalName(data);
					
				}
				str +="<button data-src="+data+">X</button></div>";
				$(".uploadedList").append(str);
				
			}
		});
				
	});
	
	
});


//이미지인지 패턴으로 확인
function checkImageType(fileName){
	
	var pattern=/jpg|gif|png|jpeg/i;
	
	return fileName.match(pattern);
	
}


//원본이미지 이름 출력
function getOriginalName(fileName){
	
	if(checkImageType(fileName)){
		//이미지 일경우
		var idx=fileName.lastIndexOf("_")+1;
		return fileName.substr(idx);
	}
	
	//일반 파일 일 경우
	var idx=fileName.indexOf("_")+1;
	return fileName.substr(idx);
	
}


//이미지 원본 파일 찾아서 링크로 연결 시키기
// /2017/10/23/s_4beb6430-7dfb-4def-bcfd-35f4425b538f_a1.jpg
function getImageLink(fileName){
	
	//이미지가 아니면 반환
	if(!checkImageType(fileName)){
		return ;
	}
	
	var front =fileName.substr(0,12);
	var end=fileName.substr(14);
	return front +end;
}

</script>

 파일 삭제하기  

@Controller

	//삭제 처리
	@ResponseBody
	@RequestMapping(value="/deleteFile", method=RequestMethod.POST)
	public ResponseEntity<String> deleteFile(String fileName){
		
		logger.info("delete file {} " , fileName);
		
		String formatName =fileName.substring(fileName.lastIndexOf(".")+1);
		
		MediaType mType =MediaUtils.getMediaType(formatName);
		
		if(mType!=null){
			//이미지 파일인경우
			//이미지 원본 파일 삭제
			String front =fileName.substring(0, 12);
			String end=fileName.substring(14);
			new File(uploadPath+(front+end).replace('/', File.separatorChar)).delete();
		}
		
		//일반 파일 삭제, 썸네일 이미지 삭제
		new File(uploadPath+fileName.replace('/', File.separatorChar)).delete();
		
		return new ResponseEntity<String>("deleted", HttpStatus.OK);
	}

<div class="uploadedList">

<div><a href="/displayFile?fileName=/2017/10/23/4275f192-011f-469f-afba-e7e291e252b6_a1.jpg">
<img src="/displayFile?fileName=/2017/10/23/s_4275f192-011f-469f-afba-e7e291e252b6_a1.jpg">a1.jpg</a>
<button data-src="/2017/10/23/s_4275f192-011f-469f-afba-e7e291e252b6_a1.jpg">X</button></div>

<div>스타크래프트 시디키.txt
<button data-src="/2017/10/23/1ceb5610-b5ec-4032-bfd1-aa6c0bdb47a4_스타크래프트" 시디키.txt="">X</button>
</div>

</div>

	//첨부파일 삭제 처리
	$(".uploadedList").on("click", "button", function(event){
		
		var that =$(this);
		$.ajax({
			url:"/deleteFile",
			type:"post",
			data:{
				fileName:$(this).attr("data-src")
			},
			dataType:"text",
			success:function(result){
				if(result=='deleted'){	
					//삭제후 화면에서 제거
					that.parent("div").remove();
				}	
			}
			
		});
		
	});
	

제작 : macaronics.net - Developer  Jun Ho Choi

소스 :  소스가 필요한 분은 비밀 댓글로 작성해 주세요.