[Spring Boot] AJAX 다중 파일 업로드

이로률·2023년 5월 16일
0

SpringBoot

목록 보기
4/5

다중 파일 업로드시 hashmap을 이용하여 ajax를 통해 클라이언트로 정보 전송

controller.java

@ResponseBody
@ExceptionHandler(MaxUploadSizeExceededException.class)
@PostMapping("/filelog/upload")
public List<HashMap<String, Object>> fileUpload(
												@RequestParam("files") MultipartFile[] files){
	List<HashMap<String, Object>> resultList = new ArrayList<>();
    for (MultipartFile file : files) {
		HashMap<String, Object> map = new HashMap<>();
        //로직 추가
        map.put("map1", map1);
		map.put("map2", map2);
		map.put("map3", map3);
		resultList.add(map);
    }
    return resultList;
}
                                                	

script.js

function clickFileUpload() {
	let files = $('#file').get(0).files;
    
    if (files.length === 0) {
      $('#file').click();
      return false;
    }//파일이 첨부되지 않았을 경우
    
    let formData = new FormData();
    for (let i = 0; i < tifFiles.length; i++) {
      let tifFile = tifFiles[i];
      formData.append("tifFiles", tifFile);
    }
    $.ajax({
      url: 'filelog/upload',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {
        for (let i = 0; i < response.length; i++) {
          let result = response[i];
          let map1 = result.map1;
          let map2 = result.map2;
          let map3 = result.map3;
      
          let fileName = files[i].name;
        }
      
        alert("File Upload Success!");
      },
      
      error: function(e) {
        alert('Error: ' + e);
      }
    });
}
profile
💻🧐💗💝💘💖

0개의 댓글