0807

이민규·2023년 8월 7일
DefaultFileRenamePolicyJSONObjectMultipartRequestenctypemultipart/form-datarealFolderserializeservletContext
0

SistMemoryNoteAjaxJSP

목록 보기
5/9

File Upload

Conspectus

1. http://www.servlets.com/cos/ 에서 cos~ 에 관한 파일을 다운받은후 압축을 풀고 cos.jar 파일을 WEB-INF 의 lib 폴더에 넣는다

  1. 폼을 만드는데 반드시 폼 타입을 method="post" enctype="multipart/form-data" 로 줘야한다(반드시)

  2. 파일이 저장되는 실제 경로 구하기

ServletContext context=getServletContext();

String realFolder=context.getRealPath("/upload");

System.out.println("업로드경로:"+realFolder);  //콘솔로 경로확인

4. MultipartRequest 라는 클래스를 사용

생성자 (request,fileDirectory(업로드할 경로),1024*5(업로드할 파일의 크기),

"euc-kr"(한글타입) , new DefaultFileRenamePolicy() ←같은이름이 있을경우 다른이름으로 저장 )

5. 메소드

1) getParameterNames() : input 타입의 name들을 반환 (반환값:Enumeration)

2) getParameter("name") : name 에 해당하는 value 값 반환

3) getFileNames() : input 타입에서 속성이 file 로 된 이름들을 반환(반환값:Enumeration)

4) getFilesystemName(name) : 실제 업로드된 파일명(동일한이름일경우 변경된 이름반환)

5) getOriginalFileName(name) : 변경되기 전의 원래 파일명

6) getFile(name) : File 타입 리턴(파일 크기등을 알아볼수 있다)

Ex & App in JSP

<body>
	<form action="uploadAction.jsp" method="post" enctype="multipart/form-data">
		<table class="table table-bordered" style="width: 500px">
			<tr>
				<th width="100">이름</th>
				<td>
					<input type="text" name="name" class="form-control" style="width: 150px">
				</td>
			</tr>
			<tr>
				<th width="100">제목</th>
				<td>
					<input type="text" name="title" class="form-control" style="width: 350px">
				</td>
			</tr>
			<tr>
				<th width="100">파일</th>
				<td>
					<input type="file" name="uploadFile">
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button type="submit" class="btn btn-success">업로드</button>
				</td>
			</tr>
		</table>
	</form>
</body>
  • <form>의 속성 중 enctype을 multipart/form-data로 부여
  • action 속성 값에 주어진 파일로 submit
<body>
	<%
	ServletContext context=getServletContext();
	String realFolder=context.getRealPath("/save");
	
	System.out.println(realFolder); //경로확인
	
	int fileSize=1024*1024*5; //5mb
	%>
  • ServletContext 객체를 생성하여(get 방식) submit한 파일이 저장되는 실제 경로를 지정
  • 업로드 가능한 최대 파일 용량 지정(n mb=1024x1024xn)
<%
	MultipartRequest multi=null;

try{
	multi=new MultipartRequest(request,realFolder,fileSize,"utf-8",new DefaultFileRenamePolicy()); //new DefaultFileRenamePolicy()는 파일명 중복허용하기 위해 사용
	
	String name=multi.getParameter("name");
	String title=multi.getParameter("title");
	String uploadFileName=multi.getFilesystemName("uploadFile");
	String originalFileName=multi.getOriginalFileName("uploadFile");
	%>
  • 스크립트릿 내에서는 try~catch문이 자동 생성되지 않으므로 수동으로 작성
  • MultipartRequest 객체를 생성하고 이에 속한 여러 메서드를 통해 submit한 데이터 가져옴
  • getFilesystemName() 메서드는 업로드된 파일 명을 반환
  • getOriginalFileName() 메서드는 업로드한 원(源) 파일 명을 반환
<table>
		<tr>
			<th>이름</th>
			<td><%=name %></td>
		</tr>
		<tr>
			<th>제목</th>
			<td><%=title %></td>
		</tr>
		<tr>
			<th>업로드 파일</th>
			<td><img src="../save/<%=uploadFileName %>"></td>
		</tr>
		<tr>
			<th>업로드 파일명</th>
			<td><%=originalFileName %></td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<input type="button" value="업로드 다시하기"
					onclick="location.href='uploadForm.jsp'">
			</td>
		</tr>
</table>
  • getFilesystemName() 메서드를 통해 생성한 uploadFileName 변수는 결과로써 저장된 파일 명
  • getOriginalFileName() 메서드를 통해 생성한 originalFileName 변수는 가져온 기존 파일 명
<%} catch(Exception e){
		
	}
	%>
</body>
  • try~catch문 닫아주기

Ex & App in Ajax #1

<body>
	<!--폼태그에 데이터 입력후 jsp로 보내기-->
	이름: <input type="text" id="name"><br>
	핸드폰: <input type="text" id="hp"><br>
	
	<button type="button" id="btn1">ajax로 서버에 보내기 #1</button>
	<button type="button" id="btn2">ajax로 서버에 보내기 #2</button>

	<div id="show"></div>
</body>
  • 데이터를 입력하여 서버로 보내기(받아오는 데이터는 없음)
<script>
		$("#btn1").click(function(){
			//입력한 값들을 읽는다
			var name=$("#name").val();
			var hp=$("#hp").val();
			
			var data="name="+name+"&hp="+hp; //방법1
			//alert(data);
			
			//ajax함수를 통해서 백앤드로 데이터를 보낸다
			$.ajax({
				type:"get",
				url:"ex01_read1.jsp",
				dataType:"html", //아무것도 return하지 않는 경우는 html
				data:data,
				//data:{"name":name,"hp":hp}, //json처럼 직접 넘겨도 됨
				success:function(res){
					//alert("success");
					$("#show").html("<h4>"+data+"</h4>");
				}
			});
		});
</script>
  • 각 <input>에서 입력한 데이터의 value를 val() 함수로 호출
  • ajax 함수를 통해 입력된 데이터를 백앤드로 전송(전송 대상 파일은 url)
  • dataType
    1) html : front에서 back end로 데이터를 전송만 하고 되받지 않을 때 사용(html 요소만 사용하기 때문)
    2) xml, json : front에서 back end로 전송 후 다시 front로 데이터를 돌려줄 때 사용(데이터를 전달 받기 위해서는 xml, json 2가지 형식만 가능하기 때문)
  • data 값은 입력된 데이터를 속성과 속성 값을 가진 원소({ })로 표현
  • data 입력 방식 :
    1) 문자열로 (속성)=(속성 값)&(속성)=(속성 값)& …
    2) {”(속성)”:(속성 값),”(속성)”:(속성 값),…}
    →지정 방식을 위배하면 인식 불가
<script>
$("#btn2").click(function(){
			//입력한 값 읽기
			var name=$("#name").val();
			var hp=$("#hp").val();
			
			//ajax함수 통해서 백앤드로 데이터 보낸다
			$.ajax({
				type:"get",
				url:"ex01_read2.jsp",
				dataType:"html",
				data:{"name":name,"hp":hp}, //방법2
				success:function(res){
					var s="<h2>"+name+"님 데이터를 DB에 추가함</h2>";
					$("#show").html(s);
				}
			});
		});
		
</script>
  • front에서 back end로 전송만 하고 받아오는 데이터가 없으므로 dataType은 html
<!--이를 받는 jsp 파일-->
<body>
	<%
	String name=request.getParameter("name");
	String hp=request.getParameter("hp");
	
	System.out.println("name:"+name);
	System.out.println("hp:"+hp);
	%>
</body>
  • request.getParameter(name 속성 값) 객체로 ajax를 통해 전송된 데이터를 받음

Ex & App in Ajax #2

<body>
	<form id="frm">
		<table>
			<tr>
				<th>상품코드</th>
				<td>
					<input type="text" name="s_code" id="s_code">
				</td>
			</tr>
			<tr>
				<th>상품명</th>
				<td>
					<input type="text" name="s_name" id="s_name">
				</td>
			</tr>
			<tr>
				<th>가격</th>
				<td>
					<input type="text" name="s_price" id="s_price">
				</td>
			</tr>
			<tr>
				<th>색상</th>
				<td>
					<input type="radio" name="color" value="yellow">노랑
					<input type="radio" name="color" value="red">빨강
					<input type="radio" name="color" value="orange">주황
					<input type="radio" name="color" value="green">초록
					<input type="radio" name="color" value="white">하양
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button type="button" id="btn">데이터 백앤드로 보내기</button>
				</td>
			</tr>
		</table>
	</form>
	<br>
	<div id="show"></div>
</body>
  • <form>태그에 id 부여
<script>
		$("#btn").click(function(){
			var data=$("#frm").serialize(); //form의 모든 name 값을 읽어옴
			//alert(data);
			
			$.ajax({
				type:"get",
				url:"ex02_read.jsp",
				dataType:"json",
				data:data,
				success:function(res){
					var s="상품코드:"+res.code+"<br>";
					s+="상품명:"+res.name+"<br>";
					s+="가격:"+res.price+"<br>";
					s+="색상:"+res.color+"<br>";
					
					$("#show").html(s);
				}
			});
		});
</script>
  • serialize() : <form>의 모든 name 값과 해당 데이터(value)를 읽어오는 메서드
  • <form> 태그를 선택자로 지정하여 serialize() 함수 사용(이를 그대로 data 값에 입력)
  • success function의 인자 값은, url로 데이터를 전송한 파일 전체(dataType(json)으로 변환한 채로)
  • json 형식으로 변환된 파일은 '.(속성)' 형식으로 속성 값 읽기 가능
<%
	String code=request.getParameter("s_code");
	String name=request.getParameter("s_name");
	String price=request.getParameter("s_price");
	String color=request.getParameter("color");
	
	JSONObject ob=new JSONObject();
	ob.put("code",code);
	ob.put("name",name);
	ob.put("price",price);
	ob.put("color",color);
%>
	<%=ob.toString() %>
  • request.getParameter() 메서드로 전송된 데이터 가져옴
  • JSONObject 객체를 생성하여 put() 메서드로, 전송된 데이터를 json 형식의 원소와 배열로 변환
  • toString() 메서드로 변환한 json 형식의 정보를 문자열로 변환(json 형식으로 front에 전달하기 위해서 반드시 문자열로 변환하고 이를 표현식으로 출력해야 함)

Ex & App in Ajax #3

<body>
	<div>
		<b>사진선택:</b>
		<select id="selImg">
			<option value="01">클로버</option>
			<option value="02">마리오</option>
			<option value="03">콘솔</option>
			<option value="04">별약</option>
			<option value="05">하뚜</option>
		</select>
		<br>
		<input type="text" id="like1">
		<input type="text" id="like2">
		<input type="text" id="like3">
		
		<button type="button" id="btn">데이터전송</button>
		<br>
		<div id="show"></div>
	</div>
</body>
  • <select> <option>의 value 값은 가져올 이미지의 구별자로 지정
<script>
		$("#btn1").click(function(){
			var photono=$("#selImg").val();
			var photoname=$("#selImg option:selected").text();
			var like1=$("#like1").val();
			var like2=$("#like2").val();
			var like3=$("#like3").val();
			
			var s="photono="+photono+"&photoname="+photoname+
					"&like1="+like1+"&like2="+like2+"&like3="+like3;
			//alert(s);
			$.ajax({
				type:"get",
				url:"ex03_receive.jsp",
				dataType:"json",
				data:s,
				success:function(res){
					var str="이름:"+res.name+"<br>";
					str+="<img src='../image/logoImg/icon"+res.photo+".png'><br>";
					str+="평점1:"+res.like1+"<br>";
					str+="평점2:"+res.like2+"<br>";
					str+="평점3:"+res.like3+"<br>";
					str+="총점:"+res.sum+"<br>";
					str+="평균:"+res.avg+"<br>"
					
					$("#show").html(str);
				}
			});
		});
</script>
  • 데이터를 백앤드로 전송 후 되받아야 하므로 dataType은 json
  • data는 1)입력 방식 사용
<%
//front에서 보낸 데이터 읽어오기
String photono=request.getParameter("photono");
String photoname=request.getParameter("photoname");
String like1=request.getParameter("like1");
String like2=request.getParameter("like2");
String like3=request.getParameter("like3");
//총점==>String을 int로 변환
//평균
int sum=Integer.parseInt(like1)+Integer.parseInt(like2)+Integer.parseInt(like3);
double avg=sum/3;

//front형태로 만들어서 다시 front로 보내기(Json)
JSONObject ob=new JSONObject();
ob.put("photo",photono);
ob.put("name",photoname);
ob.put("like1",like1);
ob.put("like2",like2);
ob.put("like3",like3);
ob.put("sum",sum);
ob.put("avg",avg);
%>
<%=ob.toString() %>
profile
이민규
초보개발자
이전 포스트

0803

다음 포스트

0808

0개의 댓글