Formdata를 활용하여 ajax로 파일전송 하기

 

jquery.를 활용하다 보면 다량의 파일을 비동기 방식으로 전송해야 되는 요구사항을 많이 만난다. 사용자 입장에서는 화면이 바뀌지 않고 파일만 보내기 때문에 해당 페이지에서의 정보가 바뀌거나 새로고침이 되지 않아서 매우 편리하다.
이를 위해서는 Javascript에서 지원하는 formdata라는 객체를 활용하면 쉽다.

//아래 내용이 일반 key, value로 전송되는 값이다.
const sendingData = new FormData();
sendingData.append('id',1234);  
sendingData.append('text','텍스트');


//아래 부분은 input type file에서 파일 데이터를 가져와서 key, value로 전송하는 부분이다.
//file1과 file2는 보내는 이름이다.
sendingData.append('file1',$('#파일테그1')[0].files[0]);
sendingData.append('file2',$('#파일테그2')[0].files[0]);

//만약 file1에 다른값을 넣으면, 당연하게도 file1로 덮어씌워져 버린다.

$.ajax({
    url: '받는주소',
    processData: false,  // 데이터 객체를 문자열로 바꿀지에 대한 값이다. true면 일반문자...
    contentType: false,  // 해당 타입을 true로 하면 일반 text로 구분되어 진다.
    data: sendingData,  //위에서 선언한 fromdata
    type: 'POST',
    success: function(result){
        console.log(result);
    },
    error : function(e){
    console.log(e);
    }
});

 

받는 서버에서는 간단하게 key, value형식으로 받을 수 있다.

spring 기준으로 본다면 아래코드처럼 받으면 된다. 물론 받는 방식은 정말 여러가지이다.

@RequestMapping(value = "/publicModelCreate.do")
@ResponseBody
public String publicModelCreate(@RequestParam HashMap<Object, Object> param,  MultipartHttpServletRequest filelist) {
    //param  --> 넘어온 파라미터
    //filelist --> 넘어온 파일 리스트
    //MultipartFile로 이름을 주어서 따로 받을 수 있다. ajax로 file1로 보냈으니 받을 때 MultipartFile file1 이런식으로도 가능하다.
    //MultipartHttpServletRequest로 받으면 한번에 객체를 통째로 받아서 나름 편하다.
    Iterator<String> iter = filelist.getFileNames(); 
    MultipartFile mfile = null; 
    String fieldName = "";
    while (iter.hasNext()) { 
        fieldName = (String) iter.next(); //파일이름, 위에서 file1과 file2로 보냈으니 file1, file2로 나온다.
        mfile = filelist.getFile(fieldName);  //저장된 파일 객체
    }
    return "SUCC";
}