7 장 . Form 처리와 파일 업로드

7 장 . Form 처리와 파일 업로드

제 7 장

1. 폼 (Form) 태그 소개HTML <form> 태그

사용자에게 정보를 요청하고 적당한 대답을 입력할 수 있는 텍스트박스나 체크박스 등을 제공한다 .

사용자로부터의 정보를 서버에게 전달할 수 있는 submit( 전달 ) 버튼을 제공한다 .

submit 버튼은 새 페이지 (JSP 에 의해 생성되는 동적 페이지 ) 를 열기 위해 사용된다 .

제 1 장2/33

1. 폼 (Form) 태그 소개

3/33 제 7 장

<form action="Target_ JSP_Page" method="get|post" enctype="…">

<input [type=text(default)| password| checkbox| radio| hidden| submit|

reset]

name="name"

[value="value"]

[size="n"]

[maxlength="n"]>

<select name="name" [size="n"] [multiple]>

<option [selected]>value

</select>

<textarea name="name" [rows="n"] [cols="n"]>

...

</textarea>

</form>

*참고 - | 는 그 양쪽의 것들 중 하나만을 선택하라는 의미 , [ ] 는 선택사항

1. 폼 (Form) 태그 소개get 전달 방식

사용자의 입력 값들은 URL 뒷부분의 물음표 (?) 다음에 다음과 같이 쿼리스트링 (querystring) 으로서 저장되어 넘겨진다 .

보통 입력 값들이 많지 않은 경우나 공개적으로 URL 에 붙는 파라미터로 넘겨도 무방한 경우에 사용된다 .

get 전달 방식의 다른 방법 form 없이 직접 브라우저에 주소 작성후 실행

4/33 제 7 장

http://www.abc.com/abc.jsp?First=foo&Last=bar

http://www.google.co.kr/search?

complete=1&hl=ko&q=jsp&lr=&aq=f

http://www.google.co.kr/search?

complete=1&hl=ko&q=java&lr=&aq=f

1. 폼 (Form) 태그 소개post 전달 방식

HTTP 요청 헤더 뒤에 입력스트림을 통해서 정보를 전달하는 방식 입력스트림은 운영 체제상에서 일종의 표준 입력 (Standard Input,

stdin) 과 같은 방식으로 JSP 또는 Servlet 내에 전달 전달 데이터의 양에 제한이 없다 . 브라우저에서 전달되는 데이터들의 모습을 사용자가 전혀 볼 수가 없다 로그인 정보 , 즉 비밀번호 전달에 사용됨

post 방식때 사용하는 enctype 속성 Enctype 은 폼의 내용이 코드화 되는 방법을 나타내는 속성이다 . post 방식으로 전달되는 데이터를 클라이언트와 서버 간에 상호

정의되어 있는 방식으로 인코딩한 다음 서버로 전달 기본값 : application/x-www-form-urlencoded 여러 파일을 업로드할 때 : multipart/form-data (7.3 절 )

5/33 제 7 장

1. 폼 (Form) 태그 소개get 과 post 방식 정리

6/33 제 7 장

get 방식 ( 기본 방식 ) post 방식

특징

- 데이터는 URL 뒤에 쿼리스트링으로

추가되어 전달

- 입 력 값 들 이 많 지 않 은 경 우 나

공 개 적 으 로 URL 에 붙 여 넘 겨 도

무방한 경우에 사용

- URL 과 별도로 전송

- HTTP 헤 더 뒤 에 입 력 스 트 림

데이터로 전달

장점- 간단한 데이터를 빠르게 처리할 수

있다 .

- GET 방식보다 많은 데이터를 전송할

수 있다 . ( 데이터 양에 제한이 없다 .)

- 최소한의 보안유지에 효과가 있다 .

단점

- 데이터 양에 제한이 있다 .

(URL 전체 데이터 사이즈는 2048

바이트로 제한된다 .)

- 같은 데이터 양이면 get 방식보다

처리 속도가 느리다 .

1. 폼 (Form) 태그 소개

Type 간단한 이름 설 명 모 습

text 글 입력상자일 반 적 인 텍 스 트 입 력 , 즉 사 용 자 의 ID 및 주 소 ,

주민등록번호 등을 입력받을 때 이용된다 .

password 암호 입력 상자

입력된 문자가 암호형식 즉 , 애스테리스크 (*) 로 표시되게

하기 위한 것으로서 사용자의 비밀번호 등을 입력받는 데

사용된다 .

checkbox 체크박스On/Off 형식의 선택으로 네모난 상자에 ∨ 표시를 하여 항목

선택을 할 수 있다 .

radio 라디오 단추 2 개 이상의 항목들 중 하나만을 택하기 위해 사용된다 .

submit 전송버튼입력된 내용을 Action 이 지정하는 JSP 파일에 전달하기

위한 것으로 버튼 모양으로 되어있다 .

reset 취소버튼입력된 내용을 초기화시키기 위한 것으로 역시 버튼 모양으로

되어있다 .

hidden 숨김

브라우저에는 아무 모양이 나오지 않지만 , Action 이

지정하는 JSP 파일에 전달할 값이 있을 경우 Value 를

이용하여 값을 지정해 줄 수 있다 .

모양 없음

<input> 태그의 type 속성 종류

7/33 제 7 장

1. 폼 (Form) 태그 소개<select> 와 <textarea> 태그

8/33 제 7 장

태그 종류 HTML 코드 모 습

<Select> 태그

<select name="select">

<option selected>item1</option>

<option>item2</option>


</select>

<select name="select2" size="3">

<option selected>item1</option>



</select>

<Textarea>

태그

<textarea

name="textfield"></textarea>

2. 폼 (Form) 을 사용한 사용자 정보 처리<input> 의 text 와 password 및 <textarea> 로부터 정보 가져오기

9/33 제 7 장

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>textform</title>

</head>

<body>

가입할 ID 와 Password 및 자기소개를 입력하세요 .

<form action="textform.jsp" method="post" name="textform“>//submit 버 튼 을 누 르 면 textform.jsp 으로 내용전달 ID : <input type="text" name="id"><br/>

Password : <input type="password" name="pw"><br/>

자기소개 <br/>

<textarea name="desc" cols="50" rows="4"></textarea><br>

<center>

<input type="submit" value=" 전송 " name="submitbtn">

<input type="reset" value=" 초기화 " name="resetbtn">

</center>

</form>

</body>

</html>

[ 예제 7.1-1] jspbook\ch07\textform.html


10/33 제 7 장

01

02

03

04

05

06

07

08

09

10

11

12

13

14

<%@ page contentType="text/html; charset=utf-8" %>

<%

request.setCharacterEncoding("utf-8"); // 한글 처리를 위한 구문%>

<html>

<head><title>Textform 처리 </title></head>

<body>

당신이 입력한 정보입니다 .<br/>

<b>ID</b> : <%= request.getParameter("id") %><br/> // ID 정보 가져오기 <b>Password</b> : <%= request.getParameter("pw")%><br/> // password 정보 가져오기 <b> 자기소개 </b><br/>

<%= request.getParameter("desc") %> <br/> // 자기소개 가져오기</body>

</html>

[ 예제 7.1-2] jspbook\ch07\text_form.jsp


textform.jsp 에서 가장 중요한 jsp 코드

request 객체는 웹브라우저에서 웹 서버로 요청을 전달하는 것과 관련된 모든 정보 ( 파라미터 ) 를 담고 있는 Jsp/Servlet 기본 객체

request 객체의 가장 기본적인 메소드

name 파라미터 값 : HTML 문서의 각각의 <input> 태그에서 사용한 name 속성

11/33 제 7 장

<%= request.getParameter("id") %>

<%= request.getParameter("pw") %>

<%= request.getParameter("desc") %>

public java.lang.String getParameter(java.lang.String

name)

2. 폼 (Form) 을 사용한 사용자 정보 처리[note] get 방식과 post 방식의 한글처리

get 방식으로 전달되는 파라미터 한글처리를 위한 설정 Tomcat_ 설치폴더 \conf\server.xml 파일 내용 중 일부를 다음과 같이

수정

post 방식으로 전달되는 파라미터 한글처리 방법 request 객체의 setCharacterEncoding("utf-8") 을 호출한 뒤

한글 입력 내용을 가져옴 .

12/33 제 7 장

<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="utf-8“ />

2. 폼 (Form) 을 사용한 사용자 정보 처리<input> 의 checkbox 및 radio 로부터 정보 가져오기

13/33 제 7 장

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

<html>

<head>


<title>rcform</title>

</head>

<body>

<form action="rcform.jsp" method="post" name="textform">

<table border=1> // 화면을 일정하게 배열하기 위해 <table> 태그를 사용 <tr> // 첫번째 행 (row)

<td> 관심분야 </td>

<td>

<input type="checkbox" name="cp" value=" 엔터테인먼트 "> 엔터테인먼트 <br/>

<input type="checkbox" name="cp" value=" 컴퓨터 /인터넷 " checked> 컴퓨터 /인터넷<br/>

<input type="checkbox" name="cp" value=" 경제 /비지니스 "> 경제 /비지니스 <br/>

<input type="checkbox" name="cp" value=" 스포츠 /건강 "> 스포츠 /건강 <br/>

<input type="checkbox" name="cp" value=" 여행 /관광 "> 여행 /관광 <br/>

</td>

</tr>

[ 예제 7.2-1] jspbook\ch07\rcform.html


14/33 제 7 장

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<tr> // 두번째 행 (row)

<td> 결혼여부 </td>

<td>

<input type="radio" name="M_Status" value=" 미혼 " checked> 미혼 <input type="radio" name="M_Status" value=" 기혼 "> 기혼 </td>

</tr>

</table>

<p>



</form>

</body>

</html>

[ 예제 7.2-1] jspbook\ch07\rcform.html


이름이 같은 경우 – array 타입으로 저장

15/33 제 7 장

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

<%@ page contentType="text/html;charset=utf-8" %>

<%

request.setCharacterEncoding("utf-8"); // 한글 처리 구문%>

<html>

<head><title>reform_jsp</title></head>

<body>

당신의 관심분야와 결혼여부는 다음과 같습니다 .<br/>

<%

String[] interest = request.getParameterValues("cp"); // 복 수 개 의 cp 값 받아오기 for (int i = 0; i < interest.length-1; i++) {

%>

<b><%= interest[i] %></b>, // 마지막 바로 이전까지 "," 와 함께 출력 <% } %> // end of for 문 <b><%= interest[interest.length-1] %></b> 과 // 마지막 cp 항목 출력 <b><%= request.getParameter("M_Status") %></b> // 결혼여부 (M_Status) 출력 </body>

</html>

[ 예제 7.2-2] jspbook\ch07\rcform.jsp

2. 폼 (Form) 을 사용한 사용자 정보 처리<input> 의 checkbox/radio 로부터 정보 가져오기 : name 이 다른 경우

Enumeration 타입으로 저장

16/33 제 7 장

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

<html>

<head>


<title>checkboxform</title>

</head>

<body>

<form name="myform" action="checkboxform.jsp" method="get">

<br/>

<input type="checkbox" name="option1" value="Milk">Milk<br/>

<input type="checkbox" name="option2" value="Butter"

checked>Butter<br/>

<input type="checkbox" name="option3" value="Cheese"

checked>Cheese<br/>

<br/>



</form>

</body>

</html>

[ 예제 7.3-1] jspbook\ch07\checkboxform.html

2. 폼 (Form) 을 사용한 사용자 정보 처리<input> 의 checkbox 및 radio 로부터 정보 가져오기 : Enumeraton

hasMoreElement()/nextElement() 사용

17/33 제 7 장

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21


<%@ page import="java.util.Enumeration" %> // java.util.Enumeration 클래스 사용하기 위한 import

<%

request.setCharacterEncoding("utf-8"); // get 방식으로 전달될때엔 꼭 적을 필요 없음%>

<html><head><title>checkboxform_jsp</title></head>

<body>

당신이 체크한 것은 아래와 같습니다 .

<br/><br/>

<%

Enumeration enums = request.getParameterNames(); // 모든 name 속성 이름을 Enumeration 객체로 얻어오기

while (enums.hasMoreElements()) {

String name = (String) enums.nextElement();

if (name.startsWith("option")) { // option 으로 시작하는 name 속성의 실제 값 얻어오기 String value = request.getParameter(name);

out.println(value + "<br/>");

}

}

%>

</body>

</html>

[ 예제 7.3-2] jspbook\ch07\checkboxform.jsp


18/33 제 7 장

getParameterNames() 의 동작 모습


19/33 제 7 장

Enumeration 객체 enum 에 대한 메소드 호출시의 동작 모습-option2 가 먼저 pop 되고 option1 이 나중에 pop 됨

e.g., option3 option2 option1 submitbtn

2. 폼 (Form) 을 사용한 사용자 정보 처리<select> 로부터 정보 가져오기

20/33 제 7 장

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

<html>

<head>


<title>selectform</title>

</head>

<body>

<form action="selectform.jsp" method="get" name="textform">

<table border=1>

<tr> // 첫번째 행 <td>학력 </td>

<td>

<select name="edu">

<option selected> 재학생 </option>

<option>학사 </option>

<option>석사 </option>

<option> 박사 </option>

</select>

</td>

</tr>

<tr><td> 소속국가 </td> // 두번째 행

[ 예제 7.4-1] jspbook\ch07\selectform.html

2. 폼 (Form) 을 사용한 사용자 정보 처리<select> 로부터 정보 가져오기

21/33 제 7 장

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<td>

<select name="na" size="3">

<option selected>Korea</option>

<option>USA</option>

<option>Japan</option>

</select></td>

</tr>

<tr><td> 관심분야 </td> // 세번째 행 <td>

<select name="like" size="4" multiple>

<option> 광고 / 미디어 </option>

<option selected> 프로듀서 </option>

<option selected> 컨설팅</option>

<option> 그래픽디자이너</option>

</select>

</td>

</tr>

</table>



</form>

</body>

</html>

[ 예제 7.4-1] jspbook\ch07\selectform.html

2. 폼 (Form) 을 사용한 사용자 정보 처리<select> 로부터 정보 가져오기 : Array

22/33 제 7 장

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

<%@page contentType="text/html;charset=utf-8" %>

<%

request.setCharacterEncoding("utf-8");

String edu = request.getParameter("edu");

String na = request.getParameter("na");

String[] like = request.getParameterValues("like");

%>

<html>

<body>

당신의 학력 , 소속국가 및 관심분야는 다음과 같습니다 .<br/>

<b><%=edu %></b> 과 <b><%=na %></b><br/>

<b><%

if (like != null) {

for (int i=0; i<like.length; i++) {

out.println(like[i]);

}

}

%></b>

</body>

</html>

[ 예제 7.4-2] jspbook\ch07\selectform.jsp

// 사용자 입력 정보를 JSP 변수인 edu, na 에 할당

// 관심분야 리스트에서 선택된 여러 개의 값을 like 배열에 할당

3. 파일 업로드와 MultipartRequestpost 방식의 multipart/form-data 인코딩

사용자 입력 폼에서 파일을 업로드하는 방법 파일 업로드는 Tomcat 제작자가 아닌 third party 에서 제공하는

라이브러리 사용 post 방식의 인코딩 종류 : 입력 데이터 그대로 보내지 않음

post 방식은 미리 정해놓은 인코딩 방식으로 데이터를 인코딩하여 서버로 전송 . 1) application/x-www-form-urlencoded ( 기본 방식 )

2) multipart/form-data: 이미지같은 binary 파일 전송 경우

23/33 제 7 장

<form action="..." method="post">

...

</form>

<form action="..." method="post" enctype="multipart/form-

data">

...

</form>


24/33 제 7 장

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

<html>

<head>


<title> 인코딩 방식의 차이점 </title>

</head> // enctype 의 디폴트 값은 "application/x-www-form-urlencoded“

<body>

<h2> 인코딩 방식 : application/x-www-form-urlencoded</h2>

<form action="upload.jsp" method="post">

Name: <input type="text" name="name"> <br>

Age: <input type="text" name="age"> <br>

File: <input type="file" name="file"> <br> // 파일 업로드를 위한 <input> 태그<input type="submit" value="SUBMIT">

</form>

<hr/>

[ 예제 7.5-1] jspbook\ch07\encoding.html


25/33 제 7 장

17

18

19

20

21

22

23

24

25

<h2> 인코딩 방식 : multipart/form-data</h2>

<form action="upload.jsp" method="post" enctype="multipart/form-data">

Name: <input type="text" name="name"> <br>

Age: <input type="text" name="age"> <br>

File: <input type="file" name="file"> <br> // 파일 업로드를 위한 <input> 태그<input type="submit" value="SUBMIT">

</form>

</body>

</html>

[ 예제 7.5-1] jspbook\ch07\encoding.html

// enctype 속성을 "multipart/form-data" 로 지정


26/33 제 7 장

01

02

03

04

05

06

07

08

09

10

11


<%@ page import = "java.io.*" %>

<%

out.print("<h2>" + request.getContentType() + "</h2>"); // 현재의 encoding type

을 알려줌

InputStream ins = request.getInputStream(); // HTTP 헤 더 이 후 에 포함되 어 서 오 는 데이터 출력int data = -1;

while ( (data = ins.read()) != -1 ) { // 한글자씩 읽어와서 브라우저에서 출력 out.print((char)data);

}

%>

[ 예제 7.5-2] jspbook\ch07\upload.jsp

기본 인코딩 방식의 입력 스트림 데이터 - query string 방식으로 전송


27/33 제 7 장

multipart/form-data 인코딩 방식의 입력 스트림 데이터

3. 파일 업로드와 MultipartRequest

post 방식의 multipart/form-data 인코딩 “boundary=….” : 각 사용자 데이터를 구분하는 긴 구분자 문자열 , 임의로 생성됨

request.getContentType() 은 인코딩 방식인 multipart/form-data 뿐만이 아니라 구분자 문자열까지 알려줌

각 구분자 뒤에는 “ Content-Disposition:” 이 따라오고 이 뒤에는 데이터의 종류를 알려주는 문자열 (e.g., form-data) 이 온다 .

그 뒤에는 실제 데이터가 “이름 = 값”의 형식으로 표현된다 .

“Content-Type:” 뒤에 파일타입을 알려준다 . 그 뒤에 업로드된 파일의 실제 데이터가 전달됨 – binary 형태의 내용을

바이트 형태로 해석하여 보여줌 . 자신이 파일을 업로드하는 프로그램을 작성한다면 입력스트림을 해석하여

실제 파일 내용만을 서버의 파일로 저장하면 된다 . 그러나 보다 쉽게 third party 에서 작성한 파일 업로드를 사용하는 것이 편리하다 .

제 1 장28/33

3. 파일 업로드와 MultipartRequest파일 업로드 구현

사용할 라이브러리 oreilly 회사에서 개발한 cos 라이브러리 (com.oreilly.servlet) 다운로드할 라이브러리 주소

라이브러리 설치하기 다운받아야 할 파일

cos-26Dec2008.zip 압축푼 이후 이용해야 할 파일

cos-26Dec2008\lib\cos.jar cos.jar 를 저장해두어야 하는 위치

Tomcat 어플리케이션 기본 폴더 밑의 lib 폴더에 복사후 Tomcat 재시작 e.g., C:\apache-tomcat-6.0.32\lib\cos.jar jspbook 어플리케이션 뿐만 아니라 Tomcat 어플리케이션 밑의 모든 웹

어플리케이션에서 이 라이브러리를 활용가능

29/33 제 7 장

http://www.servlets.com/cos/


30/33 제 7 장

01

02

03

04

05

06

07

08

09

10

11

12

13

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-

8">

<title>file-upload</title>

</head>

<body>

<form action="up.jsp" enctype="multipart/form-data"

method="post">

이름 : <input type="text" name="userName"> <BR>

파일 : <input type="file" name="upfile">

<input type="submit" value="Upload">

</form>

</body>

</html>

[ 예제 7.6-1] jspbook\ch07\fileup.html


31/33 제 7 장

파일 업로드를 위하여 이미지 bird.jpg 를 선택하는 화면


32/33 제 7 장

01

02

03

04

05

06

07

08

09

10

11

12

-

13

14

15


<%@ page import="com.oreilly.servlet.MultipartRequest,

com.oreilly.servlet.multipart.DefaultFileRenamePolicy,

java.io.File" %>

<%@ page import="thinkonweb.util.*" %>

<html>

<body>

<%

String savePath=application.getRealPath("/ch07"); // 업로드 파일을 저장할 폴더 지정 int sizeLimit = 5 * 1024 * 1024 ; // 5 메가까지 제한 넘어서면 예외 발생 // 파일 업로드는 이 시점에 이루어짐 MultipartRequest multi = new MultipartRequest(request, savePath,

sizeLimit, "utf-8",

new DefaultFileRenamePolicy()); // MultipartRequest 객 체 생 성 , utf-8:

한글파일명 // DefaultFileRenamePolicy(): 중복이름 경우 자동으로 +1

File file = multi.getFile("upfile"); // 해당 file 의 File 객체 생성

[ 예제 7.6-2] jspbook\ch07\up.jsp


33/33 제 7 장

16

17

18

19

20

21

22

23

24

25

26

27

28

String fileName=file.getName(); // getName(); 파일의 이름 얻어옴long fileSize=file.length();

if(fileName == null) { // 파일이 업로드 되지 않았을 때 out.print(" 파일 업로드 되지 않았음 ( 이유 : 파일 사이즈 초과 등 )");

} else {

out.print("User Name : " + multi.getParameter("userName") + "<br>");

out.print("File Name : " + fileName + "<br>");

out.print("File Size : " + fileSize + "<br>");

}

%>

</body>

</html>

[ 예제 7.6-2] jspbook\ch07\up.jsp


MultipartRequest 객체에 호출할 수 있는 메소드에 대한 설명

File 객체에 호출할 수 있는 메소드에 대한 설명

업로드된 파일 화일

34/33 제 7 장

http://www.servlets.com/cos/javadoc/com/oreilly/servlet/

MultipartRequest.html

http://java.sun.com/javase/6/docs/api/java/io/File.html

업로드되어진 bird.jpg 파일이 ch07 폴더에 저장된 모습

7 장 . Form 처리와 파일 업로드

Documents

Transcript of 7 장 . Form 처리와 파일 업로드