[Java] Ajax & FormData로 서버에 파일 업로드하기①

안녕하세요, 기록하는 동구 입니다.

 

이번 포스팅에서는 Ajax와 formData를이용해서 파일을 업로드해보겠습니다. 

파일업로드 Ajax 방식의 핵심은 FormData라는 브라우저에서 지원하는 클래스입니다.

 

FormData는 <form>태그와 같은 효과를 가져다주는 key/value가 저장되는 객체이다. <form>태그 처럼 데이터를 처리할수 있게 해줍니다. 이를 XHR에 실어서 서버에보내면 <form>태그 실어서 전송된것 같은 효과를 줍니다.

자 그럼 예제를 보면서 같이 해볼까요?

 

---

간단하게 뷰단의 예제코드를 작성해봅니다.

<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에 저장시키고 데이터베이스에 넣어보도록 하겠습니다~ 읽어주셔서 감사합니다.