1 / 34

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

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

Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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장

More Related