[Ch02] 4. 파일 업로드

📕 제 2장 웹 프로그래밍 기초 다지기

2.4 파일 업로드

- 웹 서버에 바이너리 데이터를 보내기 위해 고안된 멀티파트 인코딩 방법을 알아보자

- 이를 위한 <form> 태그의 설정 방법에 대해서도 함께 다루도록 한다

 

 

파일 업로드를 위한 <form> 태그 설정 : 멀티 파트 인코딩

<form action="FileUploadServlet" method="post" enctype="multipart/form-data">
	<input type="file" name="photo"><br>
	<textarea name="description" cols="50" row="3"></textarea><br>
	<input type="name" value="추가"><br>
</form>

 

<form> 태그의 enctype 속성

- <form> 태그의 enctype 속성은 데이터가 서버로 제출될 때 해당 데이터가 인코딩 되는 방법을 명시한다

- 이 속성은 <form> 요소의 method 속성값이 “post”인 경우에만 사용할 수 있습니다.

- 기본 값은 aplplication/x-www-form-urlencoded 을 사용한다

- 바이너리 데이터를 보내기 위해서는 multipart/form-data 으로 인코딩해야 한다

 

<input type="file">

- 이미지나 동영상과 같은 바이너리 데이터를 전송해야 하므로, <input> 태그의 type속성은 file로 지정한다

 

 

멀티파트 방식의 POST 요청 프로토콜 분석

멀티파트(Multipart) 방식

- 웹 클라이언트가 요청을 보낼 때, HTTP 프로토콜의 바디 부분에 데이터를 여러 부분으로 나눠서 보내는 것

- 웹 클라이언트가 서버에게 파일을 업로드할 때, http 프로토콜의 바디 부분에 파일 정보를 담아서 전송한다

- 파일을 한 번에 여러 개 전송을 하면 body 부분에 파일이 여러 개의 부분으로 연결되어 전송된다

- 이렇게 여러 부분으로 나뉘어서 전송되는 것을 Multipart data라고 한다

- 일반적으로 파일을 전송할 때 사용한다

 

멀티파트(Multipart) 전송 방식과 일반 전송 방식의 차이점

- POST 요청에서의 멀티파트 전송, 일반 전송의 가장 큰 차이점은 Content-Type 헤더와 메시지 본문의 형식이다

 

# 일반 전송 방식의 Content-Type 헤더 → enctype 속성의 기본값
Content-Type : application/x-www-form-urlencoded

# 멀티 파트 전송 방식의 Content-Type 헤더
Content-Type : multipart/form-data; boundary=----Web ... PyZ

 

- 일반 전송 방식과 달리 멀티 전송 방식 Content-Type 헤더는 데이터의 미디어 형식과 파트 구분자를 정의한다

- 바이너리 파일을 전송할 때에는 multipart/form-data으로 인코딩해야 한다

- Content-Type 헤더를 통해 미디어 타입은 인코딩한 multipart/form-data 임을 확인할 수 있다

 

 

멀티 파트 전송의 데이터 형식

- GET, POST 요청에서 웹 서버에 보내는 문자 매개변수는 & 문자를 사용해 구분했다

- 바이너리 데이터에는 & 문자가 포함될 수 있어서, & 문자를 구분자로 사용할 수 없다

- 이와 같은 이유로 데이터에 파일을 첨부할 때에는 특별한 구분자를 사용해야 한다

- Contente-Type 헤더의 boundary 값이 바로 각각의 매개 변수 값을 분리하는 구분자를 정의한 것이다

- 구분자는 웹 브라우저에서 임의로 생성하고, 웹 서버에서는 구분자를 통해 메시지 본문에서 매개변수를 분리한다

 

--------- WebKitFormBoundarylzaNhdxGzpZNljbo 
Content-Disposition: form-data; name="photo"; filename="IMG_0283.JPG"
Content-Type: image/jpeg

--------- WebKitFormBoundarylzaNhdxGzpZNljbo 
Content-Disposition: form-data; name="description"

 

- 파트 구분자의 다음 라인에는 매개변수의 정보가 명시되어 있다

- 매개변수의 데이터가 파일인 경우, 파일명과 콘텐츠 유형 정보가 추가된다

- 공백 라인 이후부터 다음 파트 구분자를 만날 때 가지 첨부 파일의 데이터가 온다

 

 

- 멀티 파트 형식으로 데이터를 보낼 때는 웹 서버에서도 그에 맞추어 데이터를 분리하고 해석해야 한다

- 자바 웹 프로그래밍에서도 일반적인 형식과 멀티 파트 형식을 구분하여 데이터를 처리한다