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

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

2. 1. 폼(Form) 태그 소개 • HTML <form>태그 • 사용자에게 정보를 요청하고 적당한 대답을 입력할 수 있는 텍스트박스나 체크박스 등을 제공한다. • 사용자로부터의 정보를 서버에게 전달할 수 있는 submit(전달) 버튼을 제공한다. • submit 버튼은 새 페이지(JSP에 의해 생성되는 동적 페이지)를 열기 위해 사용된다. 제1장

3. 1. 폼(Form) 태그 소개 • <form> 태그 형식 • action: submit 버튼을 누를 때 서버쪽에서 실행 가능한 프로그램의 URL • method: get 또는 post • enctype: method가 post일 때만 적용 • 사용자 입력 데이터에 대한 인코딩 (encoding) 방법 • 기본 인코딩: application/x-www-form-urlencoded 제7장

4. 1. 폼(Form) 태그 소개 • get 전달 방식 • 사용자의 입력 값들은 URL 뒷부분의 물음표(?) 다음에 다음과 같이 쿼리스트링 (querystring)으로서 저장되어 넘겨진다. • 보통 입력 값들이 많지 않은 경우나 공개적으로 URL에 붙는 파라미터로 넘겨도 무방한 경우에 사용된다. • get 전달 방식의 다른 방법 • form 없이 직접 브라우저에 주소 작성후 실행 제7장

5. 1. 폼(Form) 태그 소개 • post 전달 방식 • HTTP 요청헤더 뒤에 입력스트림을 통해서 정보를 전달하는 방식 • 입력스트림은 운영 체제상에서 일종의 표준 입력(Standard Input, stdin)과 같은 방식으로 JSP 또는 Servlet 내에 전달 • 전달 데이터의 양에 제한이 없다. • 브라우저에서 전달되는 데이터들의 모습을 사용자가 전혀 볼 수가 없다 • 로그인 정보, 즉 비밀번호 전달에 사용됨 • post 방식때 사용하는 enctype 속성 • Enctype은 폼의 내용이 코드화 되는 방법을 나타내는 속성이다. • post 방식으로 전달되는 데이터를 클라이언트와 서버 간에 상호 정의되어 있는 방식으로 인코딩한 다음 서버로 전달 • 기본값: application/x-www-form-urlencoded • 여러 파일을 업로드할 때: multipart/form-data (7.3절) 제7장

6. 1. 폼(Form) 태그 소개 • get과 post 방식 정리 제7장

7. 1. 폼(Form) 태그 소개 • <input> 태그의 type 속성 종류 제7장

8. 1. 폼(Form) 태그 소개 • <select>와 <textarea> 태그 제7장

9. 2. 폼(Form)을 사용한 사용자 정보 처리 • <input>의 text와 password 및 <textarea>로부터 정보 가져오기 [예제 7.1-1] jspbook\ch07\textform.html 제7장

10. 2. 폼(Form)을 사용한 사용자 정보 처리 • <input>의 text와 password 및 <textarea>로부터 정보 가져오기 [예제 7.1-2] jspbook\ch07\text_form.jsp 제7장

11. 2. 폼(Form)을 사용한 사용자 정보 처리 • <input>의 text와 password 및 <textarea>로부터 정보 가져오기 • textform.jsp에서 가장 중요한 jsp 코드 • request 객체는 웹브라우저에서 웹 서버로 요청을 전달하는 것과 관련된 모든 정보(파라미터)를 담고 있는 Jsp/Servlet 기본 객체 • request 객체의 가장 기본적인 메소드 • name 파라미터 값: HTML 문서의 각각의 <input> 태그에서 사용한 name 속성 제7장

12. 2. 폼(Form)을 사용한 사용자 정보 처리 • [note] get 방식과 post 방식의 한글처리 • get 방식으로 전달되는 파라미터 한글처리를 위한 설정 • Tomcat_설치폴더\conf\server.xml파일 내용 중 일부를 다음과 같이 수정 • post 방식으로 전달되는 파라미터 한글처리 방법 • request 객체의 setCharacterEncoding("utf-8")을 호출한 뒤 한글 입력 내용을 가져옴. <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="utf-8“ /> 제7장

13. 2. 폼(Form)을 사용한 사용자 정보 처리 • <input>의 checkbox 및 radio 로부터 정보 가져오기 [예제 7.2-1] jspbook\ch07\rcform.html 제7장

14. 2. 폼(Form)을 사용한 사용자 정보 처리 • <input>의 checkbox 및 radio 로부터 정보 가져오기 [예제 7.2-1] jspbook\ch07\rcform.html 제7장

15. 2. 폼(Form)을 사용한 사용자 정보 처리 • <input>의 checkbox 및 radio 로부터 정보 가져오기 • 이름이 같은 경우 – array타입으로 저장 [예제 7.2-2] jspbook\ch07\rcform.jsp 제7장

16. 2. 폼(Form)을 사용한 사용자 정보 처리 • <input>의 checkbox/radio로부터 정보 가져오기: name이다른 경우 • Enumeration타입으로 저장 [예제 7.3-1] jspbook\ch07\checkboxform.html 제7장

17. 2. 폼(Form)을 사용한 사용자 정보 처리 • <input>의 checkbox 및 radio 로부터 정보 가져오기: Enumeraton • hasMoreElement()/nextElement() 사용 [예제 7.3-2] jspbook\ch07\checkboxform.jsp 제7장

18. 2. 폼(Form)을 사용한 사용자 정보 처리 • <input>의 checkbox 및 radio 로부터 정보 가져오기 getParameterNames()의 동작 모습 제7장

19. 2. 폼(Form)을 사용한 사용자 정보 처리 • <input>의 checkbox 및 radio 로부터 정보 가져오기 • Enumeration 객체 enum에 대한 메소드 호출시의 동작 모습 • option2가 먼저 pop되고 option1이 나중에 pop됨 • e.g., option3 • option2 • option1 • submitbtn 제7장

20. 2. 폼(Form)을 사용한 사용자 정보 처리 • <select>로부터 정보 가져오기 [예제 7.4-1] jspbook\ch07\selectform.html 제7장

21. 2. 폼(Form)을 사용한 사용자 정보 처리 • <select>로부터 정보 가져오기 [예제 7.4-1] jspbook\ch07\selectform.html 제7장

22. 2. 폼(Form)을 사용한 사용자 정보 처리 [예제 7.4-2] jspbook\ch07\selectform.jsp • <select>로부터 정보 가져오기: Array // 사용자 입력 정보를 JSP 변수인 edu, na에 할당 // 관심분야 리스트에서 선택된 여러 개의 값을 like 배열에 할당 제7장

23. 3. 파일 업로드와 MultipartRequest • post 방식의 multipart/form-data 인코딩 • 사용자 입력 폼에서 파일을 업로드하는 방법 • 파일 업로드는 Tomcat 제작자가 아닌 third party에서 제공하는 라이브러리 사용 • post 방식의 인코딩 종류: 입력 데이터 그대로 보내지 않음 • post 방식은 미리 정해놓은 인코딩 방식으로 데이터를 인코딩하여 서버로 전송. • 1) application/x-www-form-urlencoded (기본 방식) • 2) multipart/form-data: 이미지같은 binary 파일 전송 경우 제7장

24. 3. 파일 업로드와 MultipartRequest • post 방식의 multipart/form-data 인코딩 [예제 7.5-1] jspbook\ch07\encoding.html 제7장

25. 3. 파일 업로드와 MultipartRequest • post 방식의 multipart/form-data 인코딩 [예제 7.5-1] jspbook\ch07\encoding.html // enctype 속성을 "multipart/form-data"로 지정 제7장

26. 3. 파일 업로드와 MultipartRequest • post 방식의 multipart/form-data 인코딩 [예제 7.5-2] jspbook\ch07\upload.jsp 기본인코딩 방식의 입력 스트림 데이터 - query string 방식으로 전송 제7장

27. 3. 파일 업로드와 MultipartRequest • post 방식의 multipart/form-data 인코딩 multipart/form-data인코딩 방식의 입력 스트림 데이터 제7장

28. 3. 파일 업로드와 MultipartRequest • post 방식의 multipart/form-data 인코딩 • “boundary=….” : 각 사용자 데이터를 구분하는 긴 구분자 문자열, 임의로 생성됨 • request.getContentType()은 인코딩 방식인 multipart/form-data 뿐만이 아니라 구분자 문자열까지 알려줌 • 각 구분자 뒤에는 “Content-Disposition:”이 따라오고 이 뒤에는 데이터의 종류를 알려주는 문자열(e.g., form-data)이 온다. • 그 뒤에는 실제 데이터가 “이름=값”의 형식으로 표현된다. • “Content-Type:” 뒤에 파일타입을 알려준다. • 그 뒤에 업로드된 파일의 실제 데이터가전달됨 – binary 형태의 내용을 바이트 형태로 해석하여 보여줌. • 자신이 파일을 업로드하는 프로그램을 작성한다면 입력스트림을 해석하여 실제 파일 내용만을 서버의 파일로 저장하면 된다. • 그러나 보다 쉽게 third party에서 작성한 파일 업로드를 사용하는 것이 편리하다. 제1장

29. 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 어플리케이션 밑의 모든 웹 어플리케이션에서 이 라이브러리를 활용가능 제7장

30. 3. 파일 업로드와 MultipartRequest • 파일 업로드 구현 [예제 7.6-1] jspbook\ch07\fileup.html 제7장

31. 3. 파일 업로드와 MultipartRequest • 파일 업로드 구현 파일 업로드를 위하여 이미지 bird.jpg를 선택하는 화면 제7장

32. 3. 파일 업로드와 MultipartRequest • 파일 업로드 구현 [예제 7.6-2] jspbook\ch07\up.jsp 제7장

33. 3. 파일 업로드와 MultipartRequest • 파일 업로드 구현 [예제 7.6-2] jspbook\ch07\up.jsp 제7장

34. 3. 파일 업로드와 MultipartRequest • 파일 업로드 구현 • MultipartRequest 객체에 호출할 수 있는 메소드에 대한 설명 • File 객체에 호출할 수 있는 메소드에 대한 설명 • 업로드된 파일 화일 업로드되어진 bird.jpg 파일이 ch07 폴더에 저장된 모습 제7장