2020-07-27JSP7 minutes read (About 1051 words)

[ITWILL : JSP]Javabean 13 : 게시판만들기(파일다운로드)

ITWILL학원 : 31강 JSP기초 BY 정규태강사

이 부분은 어렵다. 반복해서 보자.

1. up.jsp에 onclick이벤트 연결

onclick에 function을 넣어도 되고 location.href넣어도 둘 다 동일한 결과 출력된다.
- input type=”button” value=”파일삭제” onclick=”downfile()”
- input type=”button” value=”파일삭제” onclick=”location.href=’./down.jsp’”

<fieldset>
<form method="post" name="myform">
	<input type="text" name="filename" value="<%=fileName%>">
	<input type="button" value="파일삭제" onclick="delfile()">
	<input type="button" value="파일다운로드" onclick="downfile()">
</form>	
</fieldset>

<script type="text/javascript">
	function delfile(){
		document.myform.action="./delup.jsp"; //myform이름의 폼태그의 action값을 설정
		document.myform.submit();
	}
	
	function downfile(){
		document.myform.action="./down.jsp"; //myform이름의 폼태그의 action값을 설정
		document.myform.submit();
	}
</script>

2. down.jsp생성

인코딩
- 모든 UTF-8을 EUC-KR(euc-kr)로 변경해준다. 대소문자 둘 다 가능.
- string은 그냥 담아도 되고 객체에 담아도 된다. 즉 1번과 2번이 동일 WHY? String의 특징!
- 1번 : String filename=request.getParameter(“filename”)
- 2번 : String filename= new String(request.getParameter(“filename”));
java.io 아래에 있는 입출력 객체를 import한다
- 참고링크 : 스트림 개념

<%@page import="java.io.FileNotFoundException"%>
<%@page import="java.io.FileInputStream"%>
<%@page import="java.io.File"%>
<%@page import="java.io.OutputStream"%>
<%@page import="java.io.InputStream"%>
<%@ page language="java" contentType="text/html; charset=euc-kr"
    pageEncoding="euc-kr"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>Insert title here</title>
</head>
<body>
<h2>다운로드페이지</h2>
<%
//1. 인코딩
//string은 그냥 담아도 (=String filename=request.getParameter("filename"))되고 객체에 담아도된다
//String filename= new String(request.getParameter("filename"));
//파라미터 데이터를 가져와서 8859_1 인코딩방식으로 바꾼 뒤 EUC-KR로 한번 더 바꾸는 것
String filename = new String((request.getParameter("filename")).getBytes("8859_1"),"euc-kr");

//2. 파일저장경로(절대경로)
String filePath = "D:/upfile"; 

//3. 입출력시 필요한 객체 생성
InputStream in = null;
OutputStream os = null;
File file = null;
File viewFile = null;

//3-1. 추가 레퍼런스생성
boolean skip = false; //플래그만들기
String client = "";

// 4. 예외처리
try{
	//5. 변수생성 : 인코딩시 변경되는 string 따로 저장하려고 3개 변수 만듬
	String fname1 = "";
	String fname2 = "";
	String fname = "";
	
	fname = filename;
	fname1 = new String(fname.getBytes("8859_1"), "euc-kr");
	//9. try catch구문으로 묶기
	try{
	//6. 전달된 파일 경로,이름 사용해서 파일 객체 생성
	file = new File(filePath, fname);
	viewFile = new File(filePath,fname1);
	
	//확인차 페이지에 출력
	out.print("file : "+file+"<br>");
	out.print("viewfile : "+viewFile);
	
	//8. 파일을 읽어오기 위해서 입력 통로를 생성
	// 객체를 만든 순간 = 해당 폴더로 이동해서 파일을 선택한 상황임.
    // InputStream in = null;
    in = new FileInputStream(file); //업캐스팅
	}catch(FileNotFoundException e){
		skip = true;
	}
	
	//10. String변수만들어주기
	fname2 = new String(fname1.getBytes("euc-kr"), "8859_1");
	
	//11. 응답객체초기화 for 다운로드 팝업창 생성된 것처럼 보이게끔하여 다운로드 진행중임을 표시
	response.reset();

2-1. down.jsp에 다운로드기능 구현 코드

다운로드 기능을 구현하고자한다. 위의 코드에 이어서 작성해보자

MIME타입 : 웹에서 데이터를 표현하는 방법이다.
- 참고링크 : MIME 타입
참고링크 : 바이트스트림

	//12. 다운로드처리
	//12-1. 클라이언트가 다운로드 요청시 사용자 웹브라우저 정보필요
	//why? 브라우저별로 설정해줘야하는 것들이 다르기 때문
	client = request.getHeader("User-Agent");
	//System.out.println("client :" + client);
	//12-2. 사용자브라우저에 따른 처리
	//12-2-1. mine 타입이용하여 값세팅하기
	response.setContentType("application/x-msdownload");
	response.setHeader("Content-Description", "JS Generated Data");
	//12-2-2. 브라우저마자 실행 제어
	if(!skip){ //false항상실행
		if(client.indexOf("MSIE 5.5") != -1){
   			response.setHeader("Content-Type", "doesn/matter; charset=euc-kr");
			response.setHeader("Content-Disposition", "filename"+ new String(fname.getBytes("euc-kr"),"8859_1"));
		}else{
			response.setHeader("Content-Type", "application/octet-stream; charset=euc-kr");
			response.setHeader("Content-Disposition", "attachment; filename="+new String(fname.getBytes("euc-kr"),"8859_1"));
		}
		//12-2-3. 문자열만들기
		response.setHeader("Content-Transfer-Encoding", "binary;");
		response.setHeader("Content-Length", ""+file.length());
		response.setHeader("Pragma", "no-cache;");
		response.setHeader("Expires", "-1;");
		
		//12-3. 데이터출력할 수 있는 통로 생성
		os = response.getOutputStream();
		
		//12-3-1. 바이트스트림
		byte[] b = new byte[4096];
		int leng = 0;
		
		//12-3-2. 파일을 읽어서 leng에 저장이 될 것이고 데이터가 있을 경우에만 진행
		//leng은 데이터가 없으면 -1값을가진다
		while((leng = in.read(b))> 0){
			//데이터출력(다운로드)
			os.write(b,0,leng);
		}
	}else{
		out.print("파일다운로드 실패");
		return;
	}
			
}catch(Exception e){
	System.out.println("다운로드도중 에러발생");
	e.printStackTrace();
}finally{
	if(in != null) in.close();
	if(os != null) os.close();
}

%>

2020-07-27JSP7 minutes read (About 1124 words)

[ITWILL : JSP]Javabean 11 : MultipartRequest클래스

ITWILL학원 : 31강 JSP기초 BY 정규태강사

MultipartRequest클래스 (p305)
MultipartRequest 클래스의 생성자와 메소드들을 사용하여 파일 업로드 기능 구현

1. 라이브러리 설치

servlets페이지 방문.
왼쪽 카테고리 COS File Upload Library 클릭 하여 com.oreilly.servlet로 이동.
맨 하단에 Download 에서 Version 밑에 zip압축파일 다운로드.
lib폴더 안의 cos.jar복사하여 프로젝트의 WebContent\WEB-INF\lib에 붙여넣기.

2. fwriteForm.jsp 작성

cos.jar라이브러리설치 (위에 내용 참고)
폼태그속성 enctype=”multipart/form-data”, method=”post”
- get방식은 처리되지 않음.
- enctype속성때문에
- 참고링크 : 속성종류 3가지
D드라이브에 `upfile’ 폴더생성
- D드라이브말고 원하는 경로 지정가능.

<%
String id = (String) session.getAttribute("id");
if( id == null){
	%>
	<script type="text/javascript">
	alert("로그인 후 이용가능합니다");
	location.href="../member/loginForm.jsp"
	</script>
	<%
}

//1. cos.jar라이브러리설치 (위에 내용 참고)
//2. 폼태그속성 enctype="multipart/form-data", method="post" get방식은 처리되지 않음.
//3. D드라이브에 `upfile' 폴더생성- D드라이브말고 원하는 경로 지정가능.
%>

<fieldset>
<legend>게시판 글쓰기(p305~)</legend>
	<form action="fwritePro.jsp" method="post" enctype="multipart/form-data">
	   글쓴이 : <input type="text" name="name" required><br>
	   비밀번호 : <input type="password" name="pw" required><br>
	   제목 : <input type="text" name="subject" maxlength="15" required><br>
	   내용 : <br> 
	  <textarea rows="10" cols="35" name="content" placeholder="여기에 작성해주세요" required></textarea><br>
	  파일 : <input type="file" name="file">
	  <input type="submit" value="글등록" class="btn">
	  <button type="reset" class="btn">초기화</button>
	  <input type="button" value="목록으로" class="btn" onclick="location.href='boardList.jsp'">
	</form>
</fieldset>

3. fwritePro.jsp 작성

파일업로드구현

파일 업로드 => cos.jar (MultipartRequest 클래스)
파일이 저장되는 위치 (D:/upfile)
파일 업로드 최대 크기
- 크기를 왜 지정해야할까? 그 전에 파일을 업로드하면 어디로 저장되는지 알아야한다
- 서버의 upfile폴더안으로 들어간다.
- 따라서 유한한 디스크이고 메모리라서 최대 크기 지정이 필수이다.
- 보통 20~250MB이다.
- 1MB = 1024바이트 * 1024바이트 계산 꼭 하기
MultipartRequest생성 : import하기 (다운받았던 cos.jar라이브러리)
- 아래 코드처럼 객채생성하면 에러메세지가 뜬다
  1
  MultipartRequest multi = new MultipartRequest();
- The constructor MultipartRequest() is undefined 기본생성자가 없는 클래스이다
- 따라서 아래처럼 괄호안에 오버로딩되는 생성자를 작성해야한다.
- MultipartRequest(요청정보,파일 업로드할 폴더,파일 업로드 제한 크기,인코딩방식,파일 이름동일시 처리객체)
  1
  MultipartRequest multi = new MultipartRequest(request, savePath, maxSize, "UTF-8", new DefaultFileRenamePolicy());
- new DefaultFileRenamePolicy 객체의 역할 : 우리가 동일한 파일을 다운로드받는 경우 파일명에 파일명(1), 파일명(2)등등 자동으로 구분할 수 있도록 rename해주는 역할을 한다. 즉 중복처리하는 객체.

<%
//파일 업로드 => cos.jar (MultipartRequest 클래스)
//1. 파일이 저장되는 위치 (D:/upfile)
String savePath = "d:\\upfile"; 

//2. 파일 업로드 최대 크기 => 5MB
int maxSize =  5 * 1024 * 1024;

//3. MultipartRequest 객체생성
MultipartRequest multi = new MultipartRequest(request, savePath, maxSize,"UTF-8", new DefaultFileRenamePolicy());

//4. 파일 업로드 완료 확인
out.println("파일 업로드 완료!");
%>

테스트하면 만들었던 upfile폴더안에 저장되어있다. 성!공!적!
하지만 이 방법은 보안상 매우 위험하다
- 누구나 주소를 입력하여 upfile폴더에 접근가능하기때문이다.
- 이제 디비와 연결해보자.

4. 디비연결

위의 코드에서 아래 코드를 더 추가해야한다.

multi객체 안에 request가 있으므로 request.getParameter()가 아닌 multi.getParameter()로 가지고 와야한다.

//6. 파일의 정보 + 글 정보를 디비에 저장
//6-1. 글정보저장하는 객체생성
BoardBean bb = new BoardBean();
//6-2. 전달되는 정보 저장
// bb.setName(request.getParameter("name")); enctype과 함께 쓸 수없다
bb.setName(multi.getParameter("name"));
bb.setPw(multi.getParameter("pw"));
bb.setSubject(multi.getParameter("subject"));
bb.setContent(multi.getParameter("content"));

// bb.setFile(multi.getParameter("file")); //DB에 파일저장 불가->아래코드로 진행
bb.setFile(multi.getFilesystemName("file"));
System.out.println("upfile에 저장된 파일명 : "+multi.getFilesystemName("file"));
System.out.println("사용자가 올린 원본 파일명 : "+multi.getOriginalFileName("file"));

//6-3. 따로 저장한 정보 저장
bb.setIp(request.getRemoteAddr());

//7. boardDAO객체생성
BoardDAO bdao = new BoardDAO();

//8. 글쓰기 메서드 호출
bdao.insertBoard(bb);

//9. 목록페이지로 이동
response.sendRedirect("boardList.jsp");

DB에도 잘 들어가는 걸 확인할 수 있다.
동일한 페이지 두번 작성하면 upfile에 저장된 파일명은 자동적으로 뒤에 숫자가 붙어 고유한 파일명으로 업로드가능하다.

2020-07-27JSP5 minutes read (About 744 words)

[ITWILL : JSP]Javabean 12 : 게시판만들기(파일업로드), UTF-8과 EUC-KR차이

ITWILL학원 : 31강 JSP기초 BY 정규태강사

1. 새로운 프로젝트 fileUpload 생성

새로운 다이나믹 앱 프로젝트 생성 : 프로젝트명 fileUpload
라이브러리 추가 : cos.jar를 복사하여 D:\fileUpload\WebContent\WEB-INF\lib에 복붙하기
WebContent하위에 fileUP폴더 생성 후 그 안에 up.html페이지 생성(아래 단계)

2. up.html 작성

up.html의 meta charset="UTF-8" 에서 meta charset="euc-kr"로 변경
- UTF-8과 euc-kr 둘 다 한글을 처리하는 메타태그임.
- UTF-8 : 한글 조합형의 유니코드 인코딩방식
- EUC-KR : 한글 완성형의 유니코드 인코딩방식. 한글 2BYTE로 사용.
- 참고링크 : UTF-8과 EUC-KR의 차이점

<fieldset>
<legend>파일업로드</legend>
<form action="up.jsp" method="post" enctype="multipart/form-data">
	이름 : <input type="text" name="name"><br>
	파일 : <input type="file" name="upfile"><br>
	<input type="submit" value="파일업로드">
</form>
</fieldset>

3. up.jsp 작성

에러해결 : java build path > library > add library > server runtime > 톰캣 추가
UTF-8을 euc-kr로 싹 다 바꾸기
onclick에 function을 넣어도 되고 location.href넣어도 둘 다 동일한 결과 출력된다.
- input type=”button” value=”파일삭제” onclick=”delfile()”
- input type=”button” value=”파일삭제” onclick=”location.href=’./delup.jsp’”
참고링크1 : Enumeration
참고링크2 : Enumeration
참고링크3 : Enumeration

<%
//1. 전달되는 데이터 인코딩
request.setCharacterEncoding("euc-kr");

//2. 업로드 폴더 지정(절대경로 = 파일을 직접적으로 접근하는 방식)
String savePath = "d:\\upfile"; 

//3. 업로드 파일 크기 => 10MB
int maxSize =  10 * 1024 * 1024;

//4. 파일 이름 저장하는 변수 생성
String fileName="";
String originalFileName="";


//5. 예외처리 포함한 파일업로드
try{
	MultipartRequest multi = new MultipartRequest(request, savePath, maxSize, "euc-kr", new DefaultFileRenamePolicy());
	//여기까지 파일업로드완료
	
	//6. 파일업로드 결과를 화면에 출력
	//6-1. 폼의 이름 반환
	Enumeration formNames = multi.getFileNames(); //업캐스팅
	
	//6-2. 전달된 파일의 정보를 저장
 	String formname = (String) formNames.nextElement(); //위의 업캐스팅한 걸 다운캐스팅
		
 	//7. 서버에 저장된 파일의 이름저장
 	fileName = multi.getFilesystemName(formname);
 	
 	//8. 원래 파일의 이름 저장
 	originalFileName = multi.getOriginalFileName(formname);
 	
 	//9.파일업로드 성공시 해당 정보 출력
 	if(fileName == null){
 		out.println("파일업로드 실패!");
 	}else{
 		out.print("업로드한 사람 : "+multi.getParameter("name")
 		+"<br>업로드 파일이름(서버저장) : "+fileName+"<br>업로드 파일이름(원본): "+originalFileName
 		+"<br>file태그정보 : "+formname);
 	}
 	
}catch(Exception e){
	out.println("파일업로드 중 예외상황발생");
	e.printStackTrace();
}
%>
<fieldset>
<form method="post" name="myform">
	<input type="text" name="filename" value="<%=fileName%>">
	//onclick에 function을 넣어도 되고 location.href넣어도 동일한 결과 출력
	<input type="button" value="파일삭제" onclick="delfile()">
	<input type="button" value="파일삭제" onclick="location.href='./delup.jsp'">
	<input type="button" value="파일다운로드">
</form>	
</fieldset>

4. delup.jsp 생성

한글파일빼고는 삭제가 잘 진행된다.
인코딩방식의 문제이므로 나중에 처리하기로한다

<%
//1. 전달된 파일 이름 저장
String filename = request.getParameter("filename");

//2. 파일 객체 생성 -> 삭제
//File f = new File("해당파일의 위치+파일명");
//객체를 만든 순간 = 해당 폴더로 이동해서 파일을 선택한 상황임.
File f = new File("D:\\upfile/"+filename);

//3. 파일삭제
f.delete();
out.println("파일삭제완료");

//3-1. 한글파일빼고는 삭제가 잘 진행된다.
out.println(filename);
%>