[Java] Ajax & FormData로 서버에 파일 업로드하기①
안녕하세요, 기록하는 동구 입니다.
이번 포스팅에서는 Ajax와 formData를이용해서 파일을 업로드해보겠습니다.
파일업로드 Ajax 방식의 핵심은 FormData라는 브라우저에서 지원하는 클래스입니다.
FormData는 <form>태그와 같은 효과를 가져다주는 key/value가 저장되는 객체이다. <form>태그 처럼 데이터를 처리할수 있게 해줍니다. 이를 XHR에 실어서 서버에보내면 <form>태그 실어서 전송된것 같은 효과를 줍니다.
자 그럼 예제를 보면서 같이 해볼까요?
간단하게 뷰단의 예제코드를 작성해봅니다.
|
1
2
3
4
5
|
<h1>Ajax & FormData로 파일 업로드하기</h1>
<input type="file" name="upload_file" multiple />
<input type="button" id="btn_upload" value="submit" />
|
그다음은, 직접 ajax를 이용해서 컨트롤러단으로 넘기는 코드를 짜보겠습니다.
(ColorScripter가 소스코드를 잘못불러와서.... 그냥 이미지로 붙혔습니다. 죄송합니다.)
여기서 ajax파라미터중에 contentType, processData를 꼭 false로 설정해주셔야합니다.
1.processData는 일반적으로 서버에 전달되는 데이터는 query String 형태로 전달됩니다. data파라미터로 전달된 데이터는 jQuery내부적으로 query string으로 만드는데, 파일전송에는 이를 피해야함으로 false설정해줍니다.
2.contentType은 default값이 "application/x-www-form=urlencoded; charset=UTF-8"인데 파일을 보내줄때는 multipart/form-data로 전송해야하기때문에 false로 설정해줍니다. 파일을전송하고 디버깅모드로 체크해보면 Content-Type:multipart/form-data로 나오는걸 볼수있습니다.
다음 포스팅에서는 이어서 파일을 받아서 로컬pc에 저장시키고 데이터베이스에 넣어보도록 하겠습니다~ 읽어주셔서 감사합니다.