[ Servlet / JSP ] Form태그 GET · POST 데이터

form은 서버로 데이터 전송이 사용되는 태그

< form method="get" action="insert.jsp" >

속성	이름	설명
method	입력데이터의 전달방식	get, post
action	입력데이터의 전달위치	action="insert.jsp"

GET 방식

GET은 요청을 전송할 때 필요한 데이터를 Body에 담지 않고, 쿼리스트링을 통해 전송합니다.

쿼리스트링을 사용하게 되면 URL에 조회 조건을 표시하기 때문에 특정 페이지를 링크하거나 북마크할 수 있습니다.

( URL 뒤에 계속 값을 추가, 캐싱 할수 있다. )

※쿼리스트링 : URL?이름=값&이름=값

EX ) 게시판

<form method="get" action="insert.jsp">
	<input type="text" name="search" />
	<input type="submit" />
</form>

POST 방식

GET과 달리 전송해야 될 데이터를 HTTP 메세지의 Body에 담아서 전송합니다.

HTTP 메세지의 Body는 길이의 제한 없이 데이터를 전송할 수 있습니다. 그래서 POST 요청은 GET과 달리 대용량 데이터를 전송할 수 있습니다. ( 캐싱 할 수 없다. )

EX ) 회원가입 , 글쓰기

//post방식
<form method=“post action="insert.jsp">
<input type="text" name="search" />
<input type="submit" />
</form>

GET /POST 변수 값 받기

전달한 변수 이름을 getParameter() 메서드에 전달하여 값을 리턴 받는다.

<%
	//모든 페이지에서 파라미터 수신 전 1회 수행해야함 -> 언어변경
    request.setCharactEncoding("UTF-8");
    
    // Parameter 전달 값의 형식에 상관없이 모두 String 으로 리턴된다.
    String name = request.getParameter("name");
%>

예외 처리 필요

• 전송된 값이 null일 수 있다.

• null이 아니더라도 빈 문자열("")일 수 있다

🍫 FORM GET 실행 해보기

<form method="get" action="insert.jsp">
		<input type="text" name="id" />
		<input type="password" name="pw" />
		<input type="submit" />
</form>

insert.jsp 실행 결과

<%
		**request.setCharacterEncoding("utf-8");** **// 인코딩 방식**
		
		**// 모든 받은 파라미터는 String 이다**
		String id = request.getParameter("id"); **// 파라미터 값을 가져와 변수에 넣어준다.**
		String pw = request.getParameter("pw"); 
		//out.println("<span>" + str +"</span>");
	%>
	<p><%= id %> </p>
	<p><%= pw %> </p>
	<a href="./form.jsp"> 다시 돌아가기</a>

파일을 전송해서 업로드 시키기 위해서 필요한 FORM 태그와 INPUT 태그

form 태그

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

input 태그

<input type="file" name="uploadFile">

🍫 FORM 파일 업로드 해보기

cos 라이브러리를 사용한 예제, 보안에는 취약. 실제로 운영서버에서는 다르게 사용.

apache 라이브러리 사용하는게 좋음.

<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<body>
<form name="frmName" method="post" enctype="multipart/form-data" action="viewPage.jsp">
	user<br/> 
	<input name="user"><br/>
	title<br/> 
	<input name="title"><br/>
	file<br/> 
	<input type="file" name="uploadFile"><br/>
	<input type="submit" value="UPLOAD"><br/>
</form>
</body>
</html>

<%@page contentType="text/html; charset=UTF-8" %>
<%@page import="com.oreilly.servlet.MultipartRequest" %>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="java.util.*,java.io.*"%>
<%
	//String saveFolder = "C:/Jsp/myapp/WebContent/ch13/filestorage";
  	String saveFolder = "C:/java_work/java_fast/ko_ServleJsp/WebContent/source/ch13/filestorage"; //파일저장경로
	String encType = "UTF-8";
	int maxSize = 5 * 1024 * 1024; // 파일 최대 크기 5MByte
	try {
		MultipartRequest multi = null;
		multi = new MultipartRequest(request, saveFolder, maxSize,
		encType, new DefaultFileRenamePolicy()); // new DefaultFileRenamePolicy() 같은 명의 파일이 있다면 이름을 적절하게 변경하여 올려주는 역할 (ex:뒤에 번호 추가로 붙음)
		Enumeration params = multi.getParameterNames();// user, title을 얻기 위해

		while (params.hasMoreElements()) { //가지고 있는게 더 있는지 확인
			String name = (String) params.nextElement();
			String value = multi.getParameter(name);
			out.println(name + " = " + value + "<br/>");
		}

		Enumeration files = multi.getFileNames(); //파일을 여러개 올릴경우getFileNames 
		while (files.hasMoreElements()) { 
			String name = (String) files.nextElement(); //객체 안에 파일을 받기 위한 이름
			String filename = multi.getFilesystemName(name); //DefaultFileRenamePolicy 클래스의 파일 정책에 의해서 변경된 파일명
			String original = multi.getOriginalFileName(name); // 사용자가 올린 파일명칭
			String type = multi.getContentType(name); // 파일 데이터 타입 MultipartRequest
			File f = multi.getFile(name); // 실제 파일 데이터 
			out.println("파라미터 이름 : " + name + "<br/>");
			out.println("실제 파일 이름 : " + original + "<br/>");
			out.println("저장된 파일 이름 : " + filename + "<br/>");
			out.println("파일 타입 : " + type + "<br/>");
			if (f != null) {
				out.println("크기 : " + f.length()+"바이트");
				out.println("<br/>");
			}
		}
		//파일이 저장이 안될때
	} catch (IOException ioe) {
		System.out.println(ioe);
	} catch (Exception ex) {
		System.out.println(ex);
	}
%>

🍫 FORM 파일 여러개 업로드 해보기

<%@page contentType="text/html; charset=UTF-8" %>
<%! 
	public String getParam(HttpServletRequest request, String paramName){
		if(request.getParameter(paramName)!=null){
			return request.getParameter(paramName);
		}else{
			return "";
		}
	}
%>
<%
	request.setCharacterEncoding("UTF-8");
	int filecounter = 0;
	if(request.getParameter("addcnt")!=null){
		filecounter = Integer.parseInt(request.getParameter("addcnt"));
	}
%>
<html>
<head>
<title>File Select Page</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function inputValue(form1, param, form2, idx){
	var paramValue = form1.elements[idx].value;
	form2.elements[idx].value = paramValue;			 
	return;
}
function addFile(formName){
	if(formName.addcnt.value==""){
		alert(" 입력할 파일 갯수를 입력하고 확인버튼을 눌러주세요" ); 
		formName.addcnt.focus();						 
		return;
	}
	formName.submit();
}

function elementCheck(formName){
   paramIndex = 1; 
   for(idx=0; idx<formName.elements.length; idx++){
      if(formName.elements[idx].type == "file"){
         if(formName.elements[idx].value==""){
	        var message = paramIndex +" 번째 파일정보가 누락되었습니다.\n업로드할 파일을 선택해 주세요";
		    alert(message);
			formName.elements[idx].focus();
			return;		
	     }
	     paramIndex++; 
      }
   }
   formName.action = "fileInfoView.jsp";
   formName.submit();
}
</script>
</head>
<body topmargin="100">
<div align="center"><font color="#0000ff" size="2">
복수개의 파일의 업로드를 위하여 파일 갯수를 입력한 후<br/>
확인 버튼을 눌러주세요!!!<br/>
입력이 완료되면 DONE 버튼을 눌러주세요</font></div><br/>
<form name="frmName1" method="post">
<table width="75%" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#660000" bgcolor="#FFFF99">
<tr bgcolor="#FFCC00">
    <td width="10%"><div align="right">user</div></td>
    <td><input  name="user" onkeyup="inputValue(this.form,user,frmName2,0)" value="<%=getParam(request, "user")%>"></td>
    <td width="10%"><div align="right">title</div></td>
    <td><input name="title" onkeyup="inputValue(this.form,title,frmName2,1)" value="<%=getParam(request, "title")%>"></td>
</tr>
<tr bgcolor="#FFCC00">
	<td width="15%"><div align="right">content</div></td>
	<td width="50%" colspan="3">
	<textarea name="content" cols="40" onkeyup="inputValue(this.form,content, frmName2,2)"><%=getParam(request,"content")%></textarea>
	</td>
</tr>
<tr>
	<td colspan="4"><div align="center">
	<font size="-2">추가할 파일 수 입력</font>
	<input name="addcnt">
	<input type="button" value=" 확인 " onclick="addFile(this.form)">
	</div>
	</td>
</tr>
</table>
</form>

<form name="frmName2" method="post" enctype="multipart/form-data">
<table width="75%" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#660000" bgcolor="#FFFF99">
<tr bgcolor="#FFCC00">
	<td width="40%">
	<input type="hidden" name="user" value="<%=getParam(request, "user")%>">
	<input type="hidden" name="title" value="<%=getParam(request, "title")%>">
	<input type="hidden" name="content" value="<%=getParam(request,"content")%>">
	<%	for(int i=0; i<filecounter; i++){%>
	<input type="File" size="50" name="selectFile<%=i%>"><br/>	 	
	<%	}%>
	</td>
	<td><input type="button" value="DONE" onclick="elementCheck(this.form)"></td>
</tr>
</table>
</form>
</body>
</html>

<%@page contentType="text/html; charset=UTF-8" %>
<%@page import="com.oreilly.servlet.MultipartRequest,
                com.oreilly.servlet.multipart.DefaultFileRenamePolicy,
                java.util.*,
                java.io.*"								   
%>
<%
		//String saveFolder = "C:/Jsp/myapp/WebContent/ch13/filestorage/";
    String saveFolder = "/Users/jeongjonguk/eclipse-workspace/myapp/WebContent/ch13/filestorage"; 
		String encType = "UTF-8";
		int maxSize = 10*1024*1024;//10M
		
		ServletContext context = getServletContext();
		ArrayList saveFiles = new ArrayList();
		ArrayList origFiles = new ArrayList();
		
		String user = "";
		String title= "";
		String content = "";
		
		try{
			MultipartRequest multi = new MultipartRequest( request,saveFolder,maxSize,encType,new DefaultFileRenamePolicy());
													   
			user = multi.getParameter("user");
			title = multi.getParameter("title");
			content = multi.getParameter("content");
		
			Enumeration files = multi.getFileNames();
			while(files.hasMoreElements()){
			   String name = (String)files.nextElement();
			   saveFiles.add(multi.getFilesystemName(name));
			   origFiles.add(multi.getOriginalFileName(name));
			}
%>
<html>
<head>
<title>File Info Page</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="75%" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#660000" bgcolor="#FFFF99">
<tr>
    <td width="10%" bgcolor="#FFCC00"><div align="right"><strong>user</strong></div></td>
    <td width="30%"><%=user%></td>
    <td width="10%" bgcolor="#FFCC00"><div align="right"><strong>title</strong></div></td>
    <td width="30%"><%=title%></td>
</tr>
<tr>
	<td width="10%" bgcolor="#FFCC00"><div align="right"><strong>content</strong></div></td>
	<td width="50%" colspan="3">
		<textarea cols="50" rows="5" disabled><%=content%></textarea>	
	</td>
</tr>
<tr><td colspan="4" bgcolor="#ffffff">&nbsp;</td></tr>
<tr>
	<td colspan="4"><strong>업로드된 파일들입니다.</strong></td>
</tr>
<%for(int i=0; i<saveFiles.size();i++){%>
<tr bgcolor="#FFCC00">
	<td colspan="4">
	<a href="<%="./filestorage/"+saveFiles.get(i)%>"><strong><%=origFiles.get(i)%></strong></a>
	</td>
</tr>
<%}%>
</table>
</body>
</html>
<%
}catch(IOException ioe){
	System.out.println(ioe);
}catch(Exception ex){
	System.out.println(ex);
}
%>

'BackEnd > Servlet · JSP' 카테고리의 다른 글

[ Servlet / JSP ] JDBC 연동 (0)	2023.02.05
[ Servlet / JSP ] JSTL · EL 기본 문법 (0)	2023.02.05
[ Servlet / JSP ] JSP 내부 객체 / 세션과 쿠키 예제 (0)	2023.02.02
[ Servlet / JSP ] JSP 액션 태그 (0)	2023.02.02
[ Servlet / JSP ] Servlet · JSP 기초 개념 정리 / JSP 지시자 3가지 (0)	2023.02.01