CH07 파일 업로드

Gm·2021년 9월 17일
0

JSP 수업

목록 보기
7/10

파일 업로드(file upload)

  • 웹 브라우저에서 서버로 파일을 전송하여 서버에 저장하는 것
  • 서버로 업로드할 수 있는 파일
    • 텍스트 파일, 바이너리 파일, 이미지 파일, 문서 등 다양한 유형이 있음
  • 웹 브라우저에서 서버로 파일을 전송하기 위해 jsp 페이지에 폼 태그 사용
  • 전송된 파일을 서버에 저장하기 위해 오픈 라이브러리 이용



※ 파일 업로드 전 세팅

1) 이클립스 lib 폴더 안에 cos.jap 파일 넣기

2) upload 폴더 추가
- 파일 업로드 시 저장될 폴더를 추가

3) 새로고침 설정



실습01)

1) 이클립스내에 폴더 생성
2) jsp파일에서 파일 업로드시 생성된 폴더로 파일 업로드
==> 결과


<fileSelect.jsp>

<!--fileSelect.jsp  -->
<%@ page contentType="text/html; charset=EUC-KR"%>
<%request.setCharacterEncoding("EUC-KR");%>
<!-- 파일업로드 : post, multipart/form-data -->
<form action="viewPage.jsp" method="post" enctype="multipart/form-data">
 user : <input name="user" value="홍길동"> <br>
 title : <input name="title" value="파일업로드"> <br>
 file : <input type="file" value="파일전송" name="upload2"> <br>
 <input type="submit" value="UPLOAD">
</form>

<viewPage.jsp>

<%@page import="java.io.File"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page contentType="text/html; charset=EUC-KR"%>
<%
	request.setCharacterEncoding("EUC-KR");
	//업로드된 파일 저장 위치
	String saveFolder = 
	"C:/IT/JSP/Academe/WorkSpace/myapp/src/main/webapp/ch07/upload";
	// 업로드 파일명 인코딩
	final String encoding = "EUC-KR";
	//업로드 파일 크기
	final int maxSize = 1024*1024*10; // 10mb	
	try{
		//out.println(request.getParameter("user"));		
		// new DefaultFileRenamePolicy() 중복파일 해결을 위한 클래스
		// 파일이 업로드 되는 순간 : MultipartRequest 객체가 정상적으로 객체 생성
		MultipartRequest multi = 
				new MultipartRequest(request,saveFolder,maxSize,encoding,
				new DefaultFileRenamePolicy());
		// form에서 file 타입으로 지정한 name 값
		String fileName = multi.getFilesystemName("upload2");		
		// 중복된 파일명이 변경되기 전에 업로드 파일명
		String original = multi.getOriginalFileName("upload2");
		String type = multi.getContentType("upload2");
		long len = 0;
		// 파일의 정보를 얻기 위해서는 java.io.File 객체 생성
		File f = multi.getFile("upload2");
		if(f!=null)
			len = f.length();
			String user = multi.getParameter("user");
			String title = multi.getParameter("title");		
%>			
	저장된 파일 : <%=fileName %> <br>
	실제 파일 : <%=original %> <br>
	실제 타입 : <%=type %> <br>
	파일 크기 : <%=len %>
	user : <%=user %>
	title : <%=title %>			
<%		
	}catch(Exception e){
		e.printStackTrace();
	}	
%>

※ 업로드된 파일 저장 위치 이클립스에서 확인 하기

  • upload 폴더 우클릭 -> Properties 속성 클릭



실습2)

  • 파일 업로드 + db연동(db에 저장)


    ==> 결과


1) HeidiSQL프로그램에 tblfileload 테이블 추가

테이블명 - tblfileload

create table tblFileload(
 num int primary key auto_increment,
 upFile char(50) not null,
 size int default 0
)

2) <fupload.jsp>, <style.css> 파일 생성

<!-- fupload.jsp -->
<%@page contentType="text/html; charset=EUC-KR"%>
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
	function check() {
		if(document.forms[0].upFile.value==0){
			alert("파일을 선택하세요.");
			return;
		}
		document.forms[0].submit();
	}
</script>
</head>
<body>
<div align="center">
<h2>File Upload</h2>
<form method="post" action="fuploadProc.jsp?flag=update" 
enctype="multipart/form-data" >
<table border="1">
 <tr>
 	<td>파일선택</td>
 	<td><input type="file" name="upFile"></td>
 </tr>
 <tr>
 	<td colspan="2">
 		<input type="button" value="파일업로드" onclick="check()">
 	</td>
 </tr>
</table>
</form>
<a href="flist.jsp">파일리스트</a>
</div>
</body>
</html>

<style.css>

BODY {
	FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 160%; FONT-FAMILY: 굴림,verdana,tahoma
}
TD {
	FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 160%; FONT-FAMILY: 굴림,verdana,tahoma
}
TH {
	FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 160%; FONT-FAMILY: 굴림,verdana,tahoma
}
SELECT {
	FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 160%; FONT-FAMILY: 굴림,verdana,tahoma
}
DIV {
	FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 160%; FONT-FAMILY: 굴림,verdana,tahoma
}
FORM {
	FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 160%; FONT-FAMILY: 굴림,verdana,tahoma
}
TEXTAREA {
	BORDER-RIGHT: 1px solid #999999; BORDER-TOP: 1px solid #999999; FONT-SIZE: 9pt; BORDER-LEFT: 1px solid #999999 ; COLOR: BLACK; BORDER-BOTTOM: 1px solid #999999; FONT-FAMILY: 굴림,verdana; BACKGROUND-COLOR: white
}
INPUT {
	BORDER-RIGHT: 1px solid #999999; BORDER-TOP: 1px solid #999999; FONT-SIZE: 9pt; BORDER-LEFT: 1px solid #999999; COLOR: BLACK; BORDER-BOTTOM: 1px solid #999999; FONT-FAMILY: 굴림,verdana; HEIGHT: 19px; BACKGROUND-COLOR: white
}
A:link {text-decoration:none;color:#696969}
A:hover{text-decoration:yes;color:#66CCFF}
A:visited {text-decoration:none;color:#330066}

3) db 연동

<DBConnection.java>  <FileloadBean.java>  <FileloadMgr.java> 파일 생성


<DBConnection.java> 위의 페이지에서 가져오기


<FileloadBean.java>

package ch07;
public class FileloadBean {
	private int num;
	private String upFile;
	private int size;	
	public int getNum() {
		return num;
	}
	public void setNum(int num) {
		this.num = num;
	}
	public String getUpFile() {
		return upFile;
	}
	public void setUpFile(String upFile) {
		this.upFile = upFile;
	}
	public int getSize() {
		return size;
	}
	public void setSize(int size) {
		this.size = size;
	}	
}

<FileloadMgr.java>

public class FileloadMgr {
	private DBConnectionMgr pool;
	public final static String saveFolder = 
			"C:/IT/JSP/Academe/WorkSpace/myapp/src/main/webapp/ch07/upload";
			// 업로드 파일명 인코딩
	public final static String encoding = "EUC-KR";
			//업로드 파일 크기
	public final static int maxSize = 1024*1024*10; // 10mb	
	//생성자
	public FileloadMgr(){
		try {
			pool = DBConnectionMgr.getInstance();
			// java.sql.Connection;
			// Connection con = pool.getConnection();
			 //System.out.println("DB 연결 성공");
		} catch (Exception e) {
			System.err.println("DB 연결 실패");
			e.printStackTrace();			
		}
	}	
	// 파일 업로드
	public void uploadFile(HttpServletRequest req) {
		Connection con = null;
		PreparedStatement pstmt = null;
		String sql = null;		
		try {
			//////////////////////파일 업로드 /////////////////////////
			MultipartRequest multi = 
					new MultipartRequest(req,saveFolder,maxSize,encoding,
					new DefaultFileRenamePolicy());
			//업로드 파일명 가져오기
			String upFile = multi.getFilesystemName("upFile");
			File f = multi.getFile("upFile");
			int size = (int)f.length();
			////////////////////////////////////////////////////////		
			con = pool.getConnection();
			sql = "insert tblFileload(upFile,size)values(?,?)";
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, upFile);
			pstmt.setInt(2, size);			
			pstmt.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt);
		}		
	}	
}

4) <fupload.jsp>,<fuploadProc.jsp> 작성

<fupload.jsp>

<!-- fupload.jsp -->
<%@page contentType="text/html; charset=EUC-KR"%>
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
	function check() {
		if(document.forms[0].upFile.value==0){
			alert("파일을 선택하세요.");
			return;
		}
		document.forms[0].submit();
	}
</script>
</head>
<body>
<div align="center">
<h2>File Upload</h2>
<form method="post" action="fuploadProc.jsp?flag=update" 
enctype="multipart/form-data" >
<table border="1">
 <tr>
 	<td>파일선택</td>
 	<td><input type="file" name="upFile"></td>
 </tr>
 <tr>
 	<td colspan="2">
 		<input type="button" value="파일업로드" onclick="check()">
 	</td>
 </tr>
</table>
</form>
<a href="flist.jsp">파일리스트</a>
</div>
</body>
</html>

<fuploadProc.jsp>

<%@ page contentType="text/html; charset=EUC-KR"%>
<%request.setCharacterEncoding("EUC-KR");%>
<jsp:useBean id="mgr" class="ch07.FileloadMgr"/>
<%
	mgr.uploadFile(request);
	//파일 업로드 후에 filst.jsp로 응답
	response.sendRedirect("filst.jsp");
%>



실습3) 업로드된 파일 리스트로 출력


==> 결과

<FileloadMgr.java>

//파일 리스트
	public Vector<FileloadBean> listFile(){
		Connection con = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = null;
		Vector<FileloadBean> vlist = new Vector<FileloadBean>();		
		try {
			con = pool.getConnection();
			sql = "select * from tblFileload";
			pstmt = con.prepareStatement(sql);			
			rs = pstmt.executeQuery();
			while(rs.next()) {
				FileloadBean bean = new FileloadBean();
				bean.setNum(rs.getInt("num"));
				bean.setUpFile(rs.getString("upFile"));
				bean.setSize(rs.getInt("size"));
				vlist.addElement(bean);	
			}			
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt, rs);
		}
		return vlist;
	}

<flist.jsp>

<%@page import="ch07.FileloadBean"%>
<%@page import="java.util.Vector"%>
<%@ page contentType="text/html; charset=EUC-KR"%>
<jsp:useBean id="mgr" class="ch07.FileloadMgr"/>
<%
	request.setCharacterEncoding("EUC-KR");
	Vector<FileloadBean> vlist = mgr.listFile();	
	//out.print(vlist.size());
%>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script>	
</script>
</head>
<body>
<div align="center">
<h2>File List</h2>
<form name="frm" action="fdeleteProc.jsp">
<table border="1" width="300">
	<tr align="center">
		<td><input type="checkbox" name="allCh" onclick="allChk()"></td>
		<td>번호</td>
		<td>파일명</td>
		<td>파일크기</td>
	</tr>
	<%
		for(int i=0; i<vlist.size(); i++){
			FileloadBean bean = vlist.get(i);
			int num = bean.getNum();
			String upFile = bean.getUpFile();
			int size = bean.getSize();			
	%>
		<tr align="center">
			<td><input type="checkbox"></td>
			<td><%=i+1 %></td>
			<td><%=upFile %></td>
			<td><%=size %> byte</td>
		</tr>
	<%	
		}
	%>
</table>
</form>
<a href="fupload.jsp">입력폼</a>
</div>
</body>
</html>



실습4) 출력된 리스트 input checkbox속성 사용하여 3개씩 삭제가능


==> 결과
사진 캡쳐
<FileloadMgr.java>에 코드 추가

//파일 삭제
	public void deleteFile(int num[]) {
		Connection con = null;
		PreparedStatement pstmt = null;
		String sql = null;		
		try {			
			con = pool.getConnection();
			for(int i=0; i<num.length; i++) {
				//파일명을 기져온다.
				String upFile = getFileName(num[i]);
				// 저장된 폴더 + 파일명
				File f = new File(saveFolder + upFile);				
				if(f.exists()/*파일이 존재한다면*/)f.delete(); // 파일삭제		
				//레코드에서 삭제								
				sql = "delete from tblFileload where num=?";
				pstmt = con.prepareStatement(sql);
				pstmt.setInt(1, num[i]);
				pstmt.executeUpdate();
			}
			sql = "";
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt);
		}		
	}		
	//파일명 가져오기
	public String getFileName(int num) {
		Connection con = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = null;
		String upFile = null;		
		try {
			con = pool.getConnection();
			sql = "select upFile from tblFileload where num=?";
			pstmt = con.prepareStatement(sql);
			pstmt.setInt(1, num);			
			rs = pstmt.executeQuery();
			// sql 조건에 맞는 파일명을 가져옴
			if(rs.next()) upFile = rs.getString(1); //rs.getString("컬럼명")	
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt, rs);
		}		
		return upFile;
	}

<fdeleteProc.jsp>

profile
Gm
이전 포스트

CH05 내장객체

다음 포스트

CH13_14 쿠키, 세션

0개의 댓글

관련 채용 정보