JSP 11強-ファイルアップロード、Validation

47902 ワード

*ファイルアップロードとは?

  • Webブラウザを介してサーバにファイルを転送し、サーバに格納する
  • 画像ファイル、バイナリファイル、ドキュメント、テキストファイル
  • フォームラベルで使用する必要があります.オープンライブラリ(common-fileupload)を使用します.
  • ファイルが
  • サーバにアップロードされた場合?サーバは、リクエストパラメータを分析してファイルを検索します.
    ファイルをフォルダに保存します.この処理は簡単なjavaコードでは記述できません.
  • ファイルのアップロードの例


    <%@ page language="java" contentType="text/html; charset=UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
    <title>상품 등록</title>
    </head>
    <body>
    <!-- top 인클루드 시작 -->
    	<jsp:include page="/ch03/top.jsp" />
    <!-- top 인클루드 끝 -->
    
    <!-- content 시작 -->
    	<div class="jumbotron">
    		<div class="container">
    			<h1 class="display-3">상품 등록</h1>
    		</div>
    	</div>
    	<div class="container">
    	<!-- addProduct_process.jsp : common-fileupload -->
    	<!-- addProduct_process2.jsp : cos.jar -->
    		<form name="newProduct" action="addProduct_process2.jsp" 
    			method="post" class="form-horizontal"
    			enctype="multipart/form-data">
    			<div class="form-group row">
    				<label class="col-sm-2">상품 코드</label>
    				<div class="col-sm-3">
    					<input type="text" name="productId" class="form-control" />
    				</div> 
    			</div>
    			<div class="form-group row">
    				<label class="col-sm-2">상품명</label>
    				<div class="col-sm-3">
    					<input type="text" name="pname" class="form-control" />
    				</div> 
    			</div>
    			<div class="form-group row">
    				<label class="col-sm-2">가격</label>
    				<div class="col-sm-3">
    					<input type="text" name="uniPrice" class="form-control" />
    				</div> 
    			</div>
    			<div class="form-group row">
    				<label class="col-sm-2">상세정보</label>
    				<div class="col-sm-5">
    					<textarea name="description" rows="2" cols="50" class="form-control"></textarea>
    				</div> 
    			</div>
    			<div class="form-group row">
    				<label class="col-sm-2">제조사</label>
    				<div class="col-sm-3">
    					<input type="text" name="manufacturer" class="form-control" />
    				</div> 
    			</div>
    			<div class="form-group row">
    				<label class="col-sm-2">분류</label>
    				<div class="col-sm-3">
    					<input type="text" name="category" class="form-control" />
    				</div> 
    			</div>
    			<div class="form-group row">
    				<label class="col-sm-2">재고 수</label>
    				<div class="col-sm-3">
    					<input type="text" name="unitsInStock" class="form-control" />
    				</div> 
    			</div>
    			<div class="form-group row">
    				<label class="col-sm-2">상태</label>
    				<div class="col-sm-5">
    					<input type="radio" name="condition" id="condition1" value="new" />
    						<label for="condition1">신규 제품</label>
    					<input type="radio" name="condition" id="condition2" value="Old" />
    						<label for="condition2">중고 제품</label>
    					<input type="radio" name="condition" id="condition3" value="Refurbished" />
    						<label for="condition3">재생 제품</label>
    				</div> 
    			</div>
    <!-- 			<div class="form-group row"> -->
    <!-- 				<label class="col-sm-2">이미지</label> -->
    <!-- 				<div class="col-sm-5"> -->
    <!-- 					<input type="file" name="productImage" class="form-control"/> -->
    <!-- 				</div> -->
    <!-- 			</div> -->
    			<div class="form-group row">
    				<label class="col-sm-2">이미지(cos.jar)</label>
    				<div class="col-sm-5">
    					<input type="file" name="productImage2" class="form-control"/>
    				</div>
    			</div>
    			<div class="form-group row">
    				<div class="col-sm-offset-2 col-sm-10">
    					<input type="submit" class="btn btn-primary" value="등록" />
    				</div>
    			</div>
    		</form>
    		
    	</div>
    
    <!-- content 끝 -->
    <script type="text/javascript">
    CKEDITOR.replace("description")
    </script>
    <!-- bottom 인클루드 시작 -->
    	<jsp:include page="/ch03/bottom.jsp" />
    <!-- bottom 인클루드 끝 -->
    </body>
    </html>

    方法commons-fileuploadアップロードファイル

    <%@page import="java.io.File"%>
    <%@page import="org.apache.commons.fileupload.FileItem"%>
    <%@page import="java.util.Iterator"%>
    <%@ page language="java" contentType="text/html; charset=UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@page import="org.apache.commons.fileupload.DiskFileUpload"%>
    <%@page import="org.apache.commons.fileupload.DiskFileUpload.*"%>
    <%@page import="java.util.List"%>
    <!DOCTYPE html>
    <html>
    <head>
    <title>File Upload</title>
    </head>
    <body>
    <%
    	//파일이 저장되는 경로
    	String path = "C:\\upload";
    	
    	DiskFileUpload upload = new DiskFileUpload();
    	//업로드할 파일의 최대 크기(1M) 
    	upload.setSizeMax(1000000);
    	//메모리상에 저장할 최대 크기
    	upload.setSizeThreshold(4096);
    	//업로드된 파일을 임시 저장
    	upload.setRepositoryPath(path);
    	//파싱 : 구문분석 + 의미분석
    	//items 안에는 파일객체 + 폼 데이터가 섞여있음
    	List items = upload.parseRequest(request);
    	
    	Iterator params = items.iterator();
    	//폼 페이지에서 전송된 요청 파라미터가 없을 때까지 반복
    	while(params.hasNext()){
    		//전송된 요청 파라미터의 이름을 가져오도록 Iterator 객체 타입의 
    		//next() 메소드 사용
    		FileItem item = (FileItem)params.next();
    		
    		if(item.isFormField()){ //요청 파라미터가 일반 데이터(text, checkbox, radio..)
    			//?id=a001
    			String name = item.getFieldName(); //id
    			String value = item.getString("UTF-8"); //a001
    			out.print(name = "=" + value +"<br />");
    		}else{ //폼 페이지에서 전송된 요청 파라미터가 파일(input type='file')
    			//요청 파라미터의 이름
    			String fileFieldName = item.getFieldName();
    			//저장 파일 이름
    			String fileName = item.getName();
    			//파일 콘텐츠 유형
    			String contentType = item.getContentType();
    			
    			out.print(fileFieldName + "=" + fileName +"(" + contentType +")");
    			//경로에서 파일 이름만 가져오기
    			//켄싱.jpg가 됨
    			fileName.substring(fileName.lastIndexOf("\\") + 1);
    			long fileSize = item.getSize();
    			//java.io.file => 파일 객체 생성
    			File file = new File(path + "/" + fileName);
    			//여기서 실제로 파일 생성(복사 완료)
    			item.write(file);
    			
    			
    		}
    	}
    %>
    </body>
    </html>
    request.getParameterは使用できません

    方法cos.jarを使用してファイルをアップロードする


    request.getParameterを使用してパラメータを直接インポートできます.
    <%@ page language="java" contentType="text/html; charset=UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@page import="com.oreilly.servlet.MultipartRequest"%>
    <%@page import="dto.Product"%>
    <%@page import="ch04.com.dao.ProductRepository"%>
    <%@page import="java.util.Enumeration"%>
    <%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
    <!DOCTYPE html>
    <html>
    <head>
    <title>Insert title here</title>
    </head>
    <body>
    
    <%
    	request.setCharacterEncoding("UTF-8");
    	//웹 어플리케이션상의 절대 경로
    	String realFolder = "D:\\A_TeachingMaterial\\6.JspSpring\\workspace\\JSPBook\\WebContent\\upload";
    	
    	String filename = "";
    	//최대 업로드될 파일의 크기 5MB
    	int maxSize = 5*1024*1024;
    	//인코딩 유형
    	String encType = "UTF-8";
    	
    	//
    	MultipartRequest multi = new MultipartRequest(
    			request, realFolder, 
    			maxSize, encType,
    			new DefaultFileRenamePolicy()
    			);
    	//request객체, 저장될 실제 경로, 저장될 최대 크기, encType, 기본 파일정책
    	//request객체가 multi 안에 들어있기 때문에 request.getParameter와 같다고 봐도 됨.
    	String productId = multi.getParameter("productId"); 
    	String pname = multi.getParameter("pname"); 
    	String uniPrice = multi.getParameter("uniPrice"); 
    	String description = multi.getParameter("description"); 
    	String manufacturer = multi.getParameter("manufacturer"); 
    	String category = multi.getParameter("category"); 
    	String unitsInStock = multi.getParameter("unitsInStock"); 
    	String condition = multi.getParameter("condition"); 
    	
    	/* uniPrice가 비어있을 때 */
    	Integer price;
    	if(uniPrice.isEmpty()){
    		price = 0;
    	}else{
    		//"1000000" -> 1000000
    		price = Integer.valueOf(uniPrice);
    	}
    	
    	/* unitsInStock가 비어있을 때 */
    	long stock;
    	if(unitsInStock.isEmpty()){
    		stock = 0;
    	}else{
    		stock = Long.valueOf(unitsInStock);
    	}
    	
    	//파일객체 처리
    	//multi객체 안에는 request 객체가 들어있고, request객체 안에는 파일객체가 있음
    	Enumeration files = multi.getFileNames();
    	//productImage2
    	String fname = (String)files.nextElement();
    	//폼 페이지에서 전송되어 서버에 업로드된 파일을 가져옴
    	//P1237.jpg
    	String fileName = multi.getFilesystemName(fname);
    	
    	out.print("fname : " + fname + ", fileName : " + fileName);
    	
    	ProductRepository dao = ProductRepository.getInstance();
    	
    	Product newProduct = new Product(); //그릇 
    	newProduct.setProductId(productId);
    	newProduct.setPname(pname);
    	newProduct.setDescription(description);
    		newProduct.setUniPrice(price);
    	newProduct.setManufacturer(manufacturer);
    	newProduct.setCategory(category);
    		newProduct.setUnitsInStock(stock);
    	newProduct.setCondition(condition);
    	//파일 객체의 파일명
    	newProduct.setFilename(fileName);
    	//dao : data access object(여기서는 메모리 DB라고 생각)
    	dao.addProduct(newProduct); //insert
    	//상품 목록으로 리다이렉트
    	response.sendRedirect("products.jsp");
    %>
    
    </body>
    </html>
    

    [整理]


    1.ファイルアップロードとは?

  • Webブラウザ(クロム)からサーバ(猫を含む)にファイルを転送して保存します.
  • JSPページでフォームタグを使用して
  • Webブラウザからサーバにファイルを転送
  • オープンライブラリ(common-fileupload,cos.jar)を使用して送信されたファイルをサーバに保存

    2. cos.jar

  • cos.JArのコアクラスはMultipartRequestです.
  • マルチリクエストクラスを使用してオブジェクトを作成し、これらのオブジェクトを使用してWebブラウザ(Chrome)から送信されたマルチ/フォームデータ型のリクエストパラメータを取得し、ファイルをアップロードします.
  • 3. Commons-FileUpload

  • まずCommons-FileUploadパッケージに含まれるDiskFileUploadクラスからオブジェクト
  • を作成する.
  • オブジェクトを生成する方法を使用して、Webブラウザが送信する複数の部分/フォーム-データ型の要求パラメータ
  • を取得する.
  • FileItemクラスのメソッドを使用して、要求パラメータが通常のデータかファイルかを分析し、処理します.

    Validation


    検証#ケンショウ#

    1.検証とは?

  • フォームページで、入力したデータ値がサーバに送信される前に特定のルールに合致しているかどうかを確認します.
  • 例)年齢入力時にデジタル署名を行う、会員登録時に重複認証を行う、ログイン認証時にアイデンティティとパスワード署名を行うなど
  • .

    2.Handler関数とは?

  • フォームページでは、イベントが発生したときに検証する方法にマッピングされます.Javascript/JQueryを使用して検証するコードのセットです.
  • サーバは、
  • をオーバーロードしません.

    3.検証のタイプ

  • 基本検証:値が
  • であるかどうか
  • データ型検証:
  • がモードに適用されるかどうか(正規表現を使用)

    4.その他

  • isNaN():is Not a Number=>デジタルfalse、非デジタル、すなわちtrue
  • 5.正規表現(暗記法:正規表現を書いたか?

  • 特定の規則を有する文字列のセット
  • を表すフォーマット言語.
  • は、文字列の特定の形式
  • を検索するために一定のフォーマットのモードで表される.
  • 例)身分証明書番号、電話番号、電子メール
  • var変数名=/正規表現/[Flag];
  • var変数名=new RegExp(「正規表現」,[Flag]);
  • Flagとは?
    -i:ignore case(文字列の大文字と小文字を区別しない)
    -g:global(文字列内のすべてのモードを検出)
    -m:複数行(文字列に改行があるかどうかを検出)
  • [Flag]は省略できます.省略したら...一次検出
  • 正規表現メソッド
    -test():文字列が正規表現に合致するかどうかを判断します(true/false戻り)
    -exec():正規表現に一致する文字列を文字列から抽出し、を返します.
    実行結果:

  • 正規表現で使用される記号(メタ文字)-特定の意味を持つ文字
    -^x:文字列はxで始まる
    -x$:文字列はxで終わります
    - .x:(任意の文字)文字列はxで終わります.
    -x+:xを1回または複数回繰り返す
    - x? : xなし
    -x*:xを0回以上繰り返す
    -x|y:(または)xまたはyを検索
    -(x):()のコンテンツグループ
    -(x)(y):グループ化.自動グループ番号=>配列
    -x{n}:xを繰り返す文字をn回検索
    -x{n,}:xを繰り返す文字をn回または複数回検索
    -x{n,m}:繰り返しx n回以下のm回の文字を検索
    -[xy]:xまたはyの検索
    -[^xy]:文字が見つかりました(x,yを除く)
    -[x-z]:xからzまでの文字を検索
  • [ジョブ]

  • フォームタグ内でファイルアップロードを設定するために必要なテクニックは何ですか?
    => enctype="multipart/form-data"

  • ファイルをサーバにアップロードする処理方法について簡単に説明します
    => cos.JArとcommons-fileuploadは2種類あります.

  • MultipartRequestクラスを使用して、次の条件を満たすJSPアプリケーションを作成し、実行結果を表示します.
  • 6.データ型の検証


    正規表現を使用して、
  • ユーザーがフォームページ入力項目に入力したデータ値が特定のフォーマットに適しているかどうかを確認します.
  • 特定の規則を有する文字列の集合
  • を表すフォーマット言語.
  • 正規表現(regExp)で使用する記号をメタ文字
  • と呼ぶ.
  • メタ文字は、正規表現において特定の意味を有する文字
  • である.