[JQuery] Ajax 비동기 파일전송

#제이쿼리 #페이지변환없이 #해보자 #multipart/form-data #FormData #한참찾던거 #JS #자바스크립트 #개발 #코딩 #자바

포스팅 목차 바로가기

안녕하세요, 배곧동개발자 입니다.

ajax를 통해 비동기 데이터 전송을 많이 하실텐데, 파일을 옴길때는 꼭 폼을 submit 시키는 경향이 있더라구요. 파일도 비동기로 전송할 수 있습니다!

1. ajax 파일전송 로직

// 특이하게 아이디로 불러왔는데 꼭, 꼭 [0]를 붙혀서 받아야 한다. 빼면 오류남
var formData = new FormData($("#f_form")[0]);

$.ajax({
    url: '전송할 URL',
    type : 'POST',
    enctype: 'multipart/form-data', 
    processData: false,             
    contentType: false,
    cache: false,
    data : formData,
    success: function(data) {
        // 완료 시 진행 될 코드   
    },
    error: function(xhr, textStatus, errorThrown) {
        // 오류 시 진행 될 코드
    }
});

이렇게 FormData를 써서 한번에 넘겨버리면 그만! 당연히 multipart/form-data 는 지켜줘야합니다.

2. 자바에서 받는 로직

이렇게 자바쪽으로 보낸 다음에 자바에서는

MultipartHttpServletRequest mptRequest = (MultipartHttpServletRequest)req;
Iterator<String> fileNames = null;
fileNames = mptRequest.getFileNames();

이르케 파일을 받아주면 되는것이지요- mpt 파일을 그냥 file로 쓰고자하면

String fileName = fileNames.next();
MultipartFile mFile = mptRequest.getFile(fileName);
String saveFileName = mFile.getOriginalFilename();

File newFile = new File(saveFileName);
newFile.createNewFile();

FileOutputStream fos = new FileOutputStream(newFile);
fos.write(mFile.getBytes());

fos.close();

이런식으로 바꿔서 File로 사용 가능합니다. 딱히 어려운건 없지요!?

파일전송로직 짤때는 이래저래 항상 조심하게되는데, 이 로직 딱 저장해놓으셨다가 필요할때 꺼내 쓰세요!

나중에 내가 기억 안나면 봐야지!!

이만, 배곧동개발자 였습니다.

배곧동개발자