CSS

<style>
.fileDrop{
	width:100%;
	height:300px;
	border:1px solid #DD4B39;
	background-color : rgba(221, 75, 57, 0.5);
	margin-top:50px;
}

small{
	margin-left:3px;
	font-weight:bold;
	color:gray;
}
</style> 
 

 

 

HTML

 

  <h3 class="box-title">이미지 업로드 폼 ( 370*220 )</h3>

    <div class="box-tools">
                <div class="input-group input-group-sm" style="width: 150px;">
                 
                </div>
              </div>
           
           
            </div>
            <!-- /.box-header -->
            <div class="fileDrop"></div>
       			
     <div class="uploadedList"></div>	

 

script

<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 :"/gallery/uploadAjax",
       					data:formData,
       					dataType:'text',
       					processData :false,
       					contentType:false,
       					type:'POST',
       					success:function(data){
       						alert(data);		
       					}
       				});
       				
       			});
       		
 </script>
       
       

 

 

event.originalEvent 는 JQuery 를 이용하는 경우 event 가 순수한 DOM 이벤트가 아니기 때문에 event.originalEvent 를 이용해서 

순수한 원래의 DOM 이벤트를 가져옵니다.

 

event.dataTransfer 는 이벤트와 같이 전달된 데이터를 의미하고, 그 안에 포함된 파일 데이터를 찾아내기 위해서 

dataTransfer.files 를 이용합니다.

 

-

processData : 데이터를 일반적인 query string 으로 변환할 것인지를 결정합니다. 기본값으로 true 로. 'application/x-www-form-urencoded'

타입으로 전송합니다. 다른 형식으로 데이터를 보내기 위하여 자동 변환하고 싶지 않은 경우는 false 를 지정합니다.

 

- contentType : 기본값은  'application /x-www-form-urlencoded' 입니다. 파일의 경우 multipart/form-data 방식으로 전송하기 위해서

false 로 지정합니다.

 

 

Controller

 

@Controller
@RequestMapping("/gallery")
public class GalleryUploadController {

	
	private static final String JSP_PAGE ="/admin/gallery/";
	
	private static Logger logger =LoggerFactory.getLogger(GalleryUploadController.class);
	
	
	@RequestMapping(value ="/uploadAjax",  method=RequestMethod.GET)
	public String uploadAjax(){
		
		
		return JSP_PAGE+"/uploadform";
	}

	
	
	@ResponseBody
	@RequestMapping(value="/uploadAjax", method=RequestMethod.POST,
				produces="text/plain;charset=UTF-8")
	public ResponseEntity<String> uploadAjax(MultipartFile file) throws Exception{
		
		logger.info("originalName : " + file.getOriginalFilename());
		logger.info("size : " +file.getSize());
		logger.info("contentType: " + file.getContentType());
		
		return new ResponseEntity<String>(file.getOriginalFilename(), HttpStatus.CREATED);
	}
	
	
	
}