파일 업로드 방식 - Ajax를 이용하는 파일 업로드

• 첨부파일을 업로드 하는 방식은 두개가 있다: 폼 방식의 파일 업로드, Ajax를 이용하는 파일 업로드.

• Ajax를 이용하는 첨부파일 처리는 FormData라는 객체를 이용한다.
  - ( IE의 경우 10 이후의 버전부터 지원되므로 브라우저에 제약이 있을 수 있음)
  

• UploadController에 GET 방식으로 첨부파일을 업로드 하는 페이지 제작.

• 파일업로드에서 고려해야 하는 점들

  • 이미지 파일의 경우에는 원본 파일의 용량이 큰 경우 섬네일 이미지를 생성해야 하는 문제
  • 이미지 파일과 일반 파일을 구분해서 다운로드 혹은 페이지에서 조회하도록 처리하는 문제
  • 첨부파일 공격에 대비하기 위한 업로드 파일의 확장자 제한
  • 동일한 이름으로 파일이 업로드 되었을 때 기존 파일이 사라지는 문제

• 첨부파일업로드하는 컨트롤러

  @GetMapping("/uploadAjax")
  	public void uploadAjax(){}

• uploadAjax.jsp 페이지를 작성한다.

순수한 JavaScript를 이용해서 처리할 수도 있으나, jQuery를 이용해 처리하는 것이 편리하다.
라이브 경로를 추가하고(jQuery CDN) , 스크립트 처리를 한다.

	$("#uploadBtn").on("click", function(e){
		
		var formData = new FormData();
		var inputFile = $("input[name='uploadFile']");
		var files = inputFile[0].files;
		console.log(files);
        
        });	
        
	
    
    

jQuery를 이용하는 경우 파일 업로드는 FormData라는 객체를 이용하게 된다. FormData는 쉽게 말해 가상의 폼 태그인데 Ajax를 이용하는 파일 업로드는 FormData를 이용해서 필요한 파라미터를 담아 전송하는 방식이다.

	$("#uploadBtn").on("click", function(e){
		
		var formData = new FormData();
		var inputFile = $("input[name='uploadFile']");
		var files = inputFile[0].files;
		console.log(files);
		
		for(var i =0;i<files.length;i++){
			
			formData.append("uploadFile", files[i]);
		}
		
		$.ajax({
			//url: '${pageContext.request.contextPath}/uploadAjaxAction',
			url: '/uploadAjaxAction',
			processData : false,
			contentType : false,
			data : formData,
			type : 'POST',
			success : function(result){
				alert("Uploaded");
				
				
			}
			
			
		}); //$.ajax
		
	});	
	

첨부파일 데이터는 formData에 추가한 후 Ajax를 통해 formData 자체를 전송한다.
이때 processData, contentType은 반드시 'false'로 지정해야 전송된다.

• UploadController

  	@PostMapping("/uploadAjaxAction")
  	public void uploadAjaxPost(MultipartFile[] uploadFile) {

	String uploadFolder = "/Users/***/Desktop/untitledfolder/temp";
	
	
	
	for (MultipartFile multipartFile : uploadFile) {

		String uploadFileName = multipartFile.getOriginalFilename();
		
        // IE has file Path 
		uploadFileName = uploadFileName.substring(uploadFileName
        				 .lastIndexOf("\\") + 1);

		File saveFile = new File(uploadPath,uploadFileName);


		try {
			
			multipartFile.transferTo(saveFile);
			
		} catch (Exception e) {
			
			log.error(e.getMessage());
		}

	} 
}

• 파라미터에서는 Ajax 방식을 이용하기 때문에 Model을 사용할 일이 없으므로 사용하지 않는다.