CH 07ファイルのアップロード

47369 ワード

ファイルのアップロード(ファイルのアップロード)

  • Webブラウザを介してサーバにファイルを転送し、サーバに格納する
  • サーバにアップロード可能なファイル
  • テキストファイル、バイナリファイル、画像ファイル、ドキュメントなど多種のタイプ
  • jspページでフォームタグを使用して
  • Webブラウザからサーバにファイルを転送
  • オープン・ライブラリを使用して送信されたファイルをサーバに保存

    ※ファイルアップロード前設定


    1)このクリップライブラリフォルダでcos.japファイルを入れる

    2)アップロードフォルダの追加
    -ファイルのアップロード時に保存するフォルダを追加

    3)設定の更新

    実習


    1)このクリップ内にフォルダを作成する
    2)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>
    <%@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();
    	}	
    %>
    ※クリップでアップロードファイルの保存場所を確認する
  • をクリックしてフォルダをアップロード右クリック->プロパティをクリック
  • 実習2)

  • ファイルアップロード+db連動(dbに格納)
    =>>結果
  • 1)HeidSQLプログラムに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>
    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> 파일 생성 
    上のページからインポート
    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;
    	}	
    }
    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 -->
    <%@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>
    <%@ 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)アップロードしたファイルリストに出力


    =>>結果

    //파일 리스트
    	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;
    	}
    <%@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)出力のリスト入力チェックボックス属性で3個削除可能


    =>>結果
    フォトキャプチャ
    //파일 삭제
    	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;
    	}