파일 업로드

알아야 할 것

HTTP - Content-Type 헤더

form 태그의 enctype 속성

application/x-www-form-urlencoded

ii.

multipart/form-data

파일 업로드 라이브러리

실습 코드

테스트

응용 실습

게시판 파일 업로드

알아야 할 것

HTTP - Content-Type 헤더

HTTP

Content-Type 헤더

HTTP

웹 상에서 데이터를 주고받는 프로토콜로, 클라이언트와 서버 간의 통신 규약

•

요청(Request) : 클라이언트에서 서버로 자원을 요청하는 행위

•

응답(Response) : 클라이언트의 요청에 대하여 서버가 자원을 제공해주는 행위

요청과 응답은 각각 HTTP 통신 규약에 맞는 요청 메시지와 응답 메시지로 구현됩니다.

요청 & 응답 메시지 구성요소

•

요청 메시지

•

응답 메시지

요청 메시지

구성 요소	설명
요청 라인(Request Line)	요청 메서드, 요청 URI, HTTP 버전을 포함합니다.
요청 헤더(Request Headers)	요청에 대한 정보를 포함하는 헤더들입니다.
빈 줄(CRLF)	요청 헤더와 본문(body)을 구분하는 빈 줄입니다.
본문(body)	요청 시에 서버로 전송되는 데이터입니다. (POST 메서드에서 사용됨)

요청 메시지 예시

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html,application/xhtml+xml
Connection: keep-alive
Plain Text
복사

위의 예시는 클라이언트가 /index.html 페이지를 요청하는 GET 요청 메시지입니다. 요청 라인에는 요청 메서드(GET), 요청 URI(/index.html), HTTP 버전(1.1)이 포함되어 있으며, 요청 헤더에는 Host, User-Agent, Accept, Connection 등의 정보가 포함되어 있습니다. 마지막으로 빈 줄(CRLF)이 요청 헤더와 본문을 구분합니다.

응답 메시지

구성 요소	설명
상태 라인(Status Line)	상태 코드, 상태 메시지, HTTP 버전을 포함합니다.
응답 헤더(Response Headers)	응답에 대한 정보를 포함하는 헤더들입니다.
빈 줄(CRLF)	응답 헤더와 본문(body)을 구분하는 빈 줄입니다.
본문(body)	서버에서 클라이언트로 전송되는 데이터입니다.

응답 메시지 예시

HTTP/1.1 200 OK
Date: Wed, 06 Apr 2024 12:00:00 GMT
Server: Apache
Content-Length: 1234
Content-Type: text/html; charset=utf-8

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
Plain Text
복사

위의 예시는 서버로부터 받은 HTTP 200 OK 응답 메시지입니다. 상태 라인에는 상태 코드(200), 상태 메시지(OK), HTTP 버전(1.1)이 포함되어 있으며, 응답 헤더에는 Date, Server, Content-Length, Content-Type 등의 정보가 포함되어 있습니다. 마지막으로 빈 줄(CRLF)이 응답 헤더와 본문을 구분하며, 본문에는 HTML 페이지의 내용이 포함되어 있습니다.

Content-Type 헤더

HTTP 메시지에서 전달되는 컨텐츠의 타입을 나타냅니다. 텍스트, 이미지, 동영상 등의 데이터 유형을 명시합니다.

기본 Content-Type 헤더

유형	키워드	설명
텍스트	text/plain	평문 텍스트를 나타냅니다.
	text/html	HTML 문서를 나타냅니다.
	text/css	CSS 스타일 시트를 나타냅니다.
	text/javascript	JavaScript 코드를 나타냅니다.
이미지	image/jpeg	JPEG 이미지를 나타냅니다.
	image/png	PNG 이미지를 나타냅니다.
	image/gif	GIF 이미지를 나타냅니다.
동영상	video/mp4	MP4 동영상 파일을 나타냅니다.
	video/webm	WebM 동영상 파일을 나타냅니다.
	video/quicktime	QuickTime 동영상 파일을 나타냅니다.
기타	application/json	JSON 데이터를 나타냅니다.
	application/xml	XML 데이터를 나타냅니다.
	application/octet-stream	이진 데이터를 나타내는 타입으로, 주로 일반 파일을 다운로드 업로드할 때 사용합니다.

form 태그의 enctype 속성

서버로 데이터를 전송할 때 데이터의 인코딩 방식을 지정하는 속성입니다.

application/x-www-form-urlencoded

multipart/form-data

Content-Type (ecntype)	특징
application/x-www-form-urlencoded	폼 데이터를 URL 인코딩하여 전송함. 주로 텍스트 데이터 전송에 사용됨.
multipart/form-data	폼 데이터를 여러 부분으로 나누어 전송함. 파일 업로드와 같은 이진 데이터 전송에 사용됨.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload Example</title>
</head>
<body>
    <h2>파일 업로드</h2>
    <form action="/upload.jsp" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="file">
        <button type="submit">업로드</button>
    </form>
</body>
</html>
HTML
복사

파일 업로드를 하기 위해서는 enctype=”multiart/form-data” 를 지정해야합니다.

input type=”file” 태그를 이용하여 파일을 첨부합니다.

action=”요청 경로” 속성에 지정한 경로로 파일을 전송합니다.

일반적으로 HTML <form> 요소를 사용하여 서버로 데이터를 전송할 때는 application/x-www-form-urlencoded나 multipart/form-data 두 가지 인코딩 방식을 사용할 수 있습니다. 그러나 파일을 업로드할 때는 multipart/form-data를 사용해야 합니다. 이는 파일 데이터를 서버로 전송하기 위해 사용되는 표준 방식입니다.

여기서 [업로드] 버튼을 누르면, action 속성에 작성된 요청 경로로 업로드 요청이 전송됩니다.

파일 업로드 라이브러리

JSP 프로젝트(Dynamic Web Project)에서 주로 사용하는 파일 업로드 라이브러리를 소개합니다.

•

cos.jar

•

commons

◦

commons-fileupload.jar

◦

commons-io.jar

실습 코드

•

라이브러리 추가

•

index.jsp

•

upload.jsp

라이브러리 추가

commons-io.jar 라이브러리 다운로드

Maven Repository: commons-io » commons-io » 2.6

https://mvnrepository.com/artifact/commons-io/commons-io/2.6

commons-fileupload 라이브러리 다운로드

Maven Repository: commons-fileupload » commons-fileupload » 1.3.3

https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload/1.3.3

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>파일 업로드</title>
</head>
<body>
	<h2>파일 업로드</h2>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="file">
        <button type="submit">업로드</button>
    </form>
</body>
</html>
HTML
복사

upload.jsp

<%@page import="java.io.File"%>
<%@page import="java.util.UUID"%>
<%@page import="java.util.Iterator"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = "C:\\UPLOAD";

	DiskFileItemFactory factory = new DiskFileItemFactory();
	ServletFileUpload upload = new ServletFileUpload(factory);
	upload.setSizeMax(10*1000*1000); 		// 10MB - 파일 최대 크기
	
	List<FileItem> items = upload.parseRequest(request);
	Iterator params = items.iterator();
	
	while( params.hasNext() ) {
		FileItem item = (FileItem) params.next();
		String value = item.getString("utf-8");
		
		// 일반 데이터
		if( item.isFormField() ) {
			out.println(item.getFieldName() + " : " + value);
		}
		// 파일 데이터
		else {
			String fileName = item.getName();
			String filePath = "";
			
			// 파일 중복 방지 - 파일명 : 5a3089e0-22_강아지.jpg
			fileName = UUID.randomUUID().toString().substring(0, 11) + "_" + fileName;
			// 파일 전체 경로 - 파일경로 : C:\\UPLOAD\\5a3089e0-22_강아지.jpg
			File file = new File(path + "/" + fileName);
			filePath = file.getPath();
			long fileSize = item.getSize();
			
			// 파일 데이터
			byte[] fileData = item.getInputStream().readAllBytes();
			
			// 파일 업로드 (저장)
			item.write(file);			
		}
	}
	
%>
HTML
복사