[Spring] ajax를 이용한 파일 업로드

Ajax를 이용해 파일 데이터만을 전송하는 방법

 

2021.10.11 - [Spring] - [Spring] form 태그를 이용한 파일 업로드

[Spring] form 태그를 이용한 파일 업로드

form태그를 이용한 파일 업로드와 설정 동일

 

Controller 작성

@Controller
@Log4j
public class UploadController

    @GetMapping("/uploadAjax")
    public void uploadAjax(){
        log.info("upload ajax 접속");
    }
    
}

 

/uploadAjax로 접속하면 form에 접근할 수 있도록  view 폴더 아래 uploadAjax.jsp 작성

<div class="uploadDiv">
<!-- form 태그를 통해 파일업로드 하는것과 차이점은 form태그의 유무
     action을 통한 목적지가 없기 때문에 button에 이벤트(버튼을 누르면 파일을 업로드)를 걸 예정 -->
    <input type="file" name="uploadFile" multiple>
</div>

<button id="uploadBtn">Upload</button>

 

Upload 버튼을 클릭하면 해당 파일 업로드를 위한 정보를 저장하고 전송할 수 있도록 작성

$(document).ready(function(){
  $('#uploadBtn').on("click", function(e){
      // 첨부파일을 위한 자료형 FormData
      // FormData 객체를 생성해 제출버튼을 누르면 input태그의 정보가 formData에 저장되도록함
      var formData = new FormData();
      
      // input 태그의 정보를 저장
      var inputFile = $("input[name='uploadFile']");
      
      // input 태그에서 file에 해당하는 정보만을 저장
      var files = inputFile[0].files;

      // 파일이 여러개일 수 있으므로, 반복문을 이용
      for(var i = 0; i < files.length; i++){
          // key와 value로 이루어진 formData에 key와 value값을 추가
          formData.append("uploadFile", files[i]);
      }

      // 비동기 요청으로 파일 데이터 전송
      $.ajax({
          url: '/uploadAjaxAction',
          processData: false,
          contentType: false,
          data: formData,
          type: 'POST',
          success: function(result){
              alert("uploaded!");
          }
      });
  });
});

 

Controller 로 돌아와서 ajax로 전송된 파일 데이터를 받기

@ResponseBody
@PostMapping("/uploadAjaxAction")
public void uploadAjaxPost(MultipartFile[] uploadFile) {
    log.info("ajax post update!");
    
    // web.xml에 작성한 경로와 동일한 경로를 upload될 폴더로 작성
    String uploadFolder = "C:\\upload_data\\test";
    
    for(MultipartFile multipartFile : uploadFile) {
        // getOriginalFilename(): 업로드되는 파일의 이름
        String uploadFileName = multipartFile.getOriginalFilename();
        
        /* substring(): 0부터 파라미터에 들어가는 int 값을 포함한 문자열을 자르고 리턴
         * lastIndexOf(): String의 마지막 문자부터 처음문자로 되돌아오면서 해당 문자열의 index를 찾음
         * uploadFileName의 "\\"가 있는 자리를 찾아 1을 더하고 해당 인덱스 이후부터 자르고 리턴
         */
        uploadFileName = uploadFileName.substring(uploadFileName.lastIndexOf("\\") + 1);
        
        // File 객체를 생성해 저장될 경로와 파일이름을 넣어줌
        File saveFile = new File(uploadFolder, uploadFileName);
        
        try {
            // transferTo(): 파라미터에 File 객체를 넣어 파일 저장하는 메서드
            multipartFile.transferTo(saveFile);
        }catch(Exception e) {
            log.error(e.getMessage());
        }
    }
}

해당 폴더에 파일이 저장된 것을 알 수 있음