국비지원 67일차 - JSP 파일업로드, 파일다운로드, war배포, el표현식 jQuery pageXY, clientXY, dragdrop

파일업로드

이미지를 업로드하고 경로를 바로 입력하면 이미지가 동기화 되지 않는다.
따라서
String upDir = application.getRealPath("/upload")

<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.oreilly.*, com.oreilly.servlet.*"%>
<jsp:include page="/top.jsp"/>
<div class="text-left p-5">
	<h1>MultipartRequest를 이용한 파일 업로드</h1>
<%
	//String upDir="C:\\myjava\\workspace\\MyWeb\\WebContent\\upload";
	// /MyWeb/upload/==> 절대경로를 얻어오자. application 내장객체를 이용 ServletContext 타입
	// ServletContext application = request.getServletContext();
	// session.getServletContext()
	String upDir=application.getRealPath("/upload");
	//컨텍스트를 기준으로 /upload디렉토리의 절대경로를 반환한다.
	// upDir ==> /MyWeb/upload
	System.out.println(upDir);
	//이클립스의 경우 다음과 같이 나온다.
	//C:\\myjava\\workspace\\.metadata\\.plugins\\org.eclipse.wst.server.core\\tmp0\\wtpwebapps\\MyWeb\\upload
	MultipartRequest mr=null;
	try{
		DefaultFileRenamePolicy df= new DefaultFileRenamePolicy();
		mr= new MultipartRequest(request,upDir,10*1024*1024,"UTF-8",df);
		//최대 업로드 용량 : 10M => 이를 초과하면 IOException이 발생함
		out.println("<h2 class='text-success'>업로드 성공<h2>");
		out.println(upDir+"<br>");
		//1.파라미터값 얻기
		//String name=request.getParameter("name")[X]
		String name=mr.getParameter("name");
		
		//2.업로드한 파일면 얻어오기
		//String filename=mr.getParameter("filename");[X]
		String filename = mr.getFilesystemName("filename");
		//원본파일명
		String originfilename = mr.getOriginalFileName("filename");
		//첨부파일 크기
		java.io.File f= mr.getFile("filename");
		long fsize=0;
		if(f!=null){
			fsize=f.length();
		}
		//첨부파일의 컨텐트 타입
		String ctype = mr.getContentType("filename");
		
		out.println("<h2>올린이: "+name+"</h2>");
		out.println("<h2>첨부파일명: "+filename+"</h2>");
		out.println("<h2>원본파일명: "+originfilename+"</h2>");
		out.println("<h2>파일크기: "+fsize+"bytes</h2>");
		out.println("<h2>파일 컨텐트 타입: "+ctype+"</h2>");
		
		if(ctype.equals("image/png")||ctype.equals("images/jpg")||ctype.equals("image/gif")||ctype.equals("image/jpeg")){
			%>
			<img src="<%=request.getContextPath()%>/upload/<%=filename%>">
			<%
		}
		
		
		
	}catch(java.io.IOException e){
		out.println("<h2 class='text-danger'>파일 업로드 실패</h2>");
		//파일 용량 초과 or enctype이 multipart/form-data가 아닐 때 예외 발생함
		e.printStackTrace();
	}
%>
	
</div>
<jsp:include page="/foot.jsp"/>

파일다운로드

재사용성위해서 Servlet으로 다운로드 구현

다운받을 파일명 넘겨주기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.io.*,java.util.*,java.text.*"%>
<jsp:include page="/top.jsp"/>
<%
	String upDir=application.getRealPath("/upload");
	File dir= new File(upDir);
	//해당 디렉토리의 파일 목록 배열 얻어오기
%>
<div class="text-left p-5">
	<h1 class="text-center">업로드한 파일 목록</h1>
	<table class="table table-stiped">
		<tr class="bg-warning mt-3">
			<th>FILE/DIR</th>
			<th>파일명</th>
			<th>파일크기</th>
			<th>마지막수정일</th>
			<th>다운로드</th>
		</tr>
		<!-- 반복분 -->
		<%
		File [] flist = dir.listFiles();
		if(flist==null||flist.length==0){
			out.println("<tr><td colspan='5'>");
			out.println("데이터가 없습니다.</td></tr>");
		}else{
			for(int i=0;i<flist.length;i++) {
				String str=(flist[i].isDirectory())? "dir":"file";
				String fname=flist[i].getName();
				String size=flist[i].length()+"";
	//			System.out.print(flist[i].getAbsolutePath()+" ");
				long s =flist[i].lastModified();
				Date ls = new Date(s);
				SimpleDateFormat sdf
				=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
				String time = sdf.format(ls);
		%>
		<tr>
			<td><img src="../images/<%=str %>.jpg"></td>
			<td><%=fname %></td>
			<td><%=size %></td>
			<td><%=time %></td>
			<td><button class="btn btn-outline-info" onclick="fileDown('<%=fname%>')">다운로드</button></td>
		</tr>
		<%				
			}
		}
		%>
		<!-- ---- -->
	</table>
</div>
<!-- 파일 다운로드를 위한 폼 -->
<form action="../FileDown" id="df" name="df">
	<input type="text" name="fname" id="fname">
</form>
<script>
	function fileDown(fname){
		//alert(fname);
		$("#fname").value(fname);
	}
</script>
<jsp:include page="/foot.jsp"/>

FileDown Servlet

package common.file;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/FileDown")
public class FileDownloadServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		download(request,response);
	}
	
	private void download(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException{
		//1.다운로드받을 파일명 받기
		String fname = req.getParameter("fname");
		System.out.println("fname: "+fname);
		//2.절대경로 만들기
		ServletContext application = req.getServletContext();
		String upDir = application.getRealPath("upload");
		String path=upDir+File.separator+fname;
		System.out.println("path: "+path);
		
		//res.setContentType("application/unknown");
		res.setContentType("application/octet-stream");
		//알수 없는 형식으로 지정 ==> 브라우저는 컨텐트 타입을 보고
		//표현할 수 있는 형식이면 해당 형식으로 표현하고 잘 모르는 형식이면 다운로드창을 실행시켜
		//다운로드 받도록 처리한다.
		String fname_en = new String(fname.getBytes(),"ISO-8859-1");
		String arg1="attachment; filename="+fname_en;
		res.setHeader("Content-Disposition", arg1);
		//3.해당 경로와 스트림 연결
		//(FileInputStream)=> 파일을 읽어서
		//(ServletOutputStream)=> 클라이언트쪽으로 내보낸다.
		BufferedInputStream bis = new BufferedInputStream(new FileInputStream(path));
		ServletOutputStream sos = res.getOutputStream();
		BufferedOutputStream bos = new BufferedOutputStream(sos);
		int n=0;
		byte []data=new byte[4000];
		while((n=bis.read(data))!=-1) {
			bos.write(data,0,n);
			bos.flush();
		}
		bis.close();
		bos.close();
		sos.close();
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		download(request,response);
	}

}

war배포

MyWeb - export (tomcat - webapps) 
monitor tomcat 실행
start 접속

http://localhost:9090/manager/html - 접속해서 session 시간 설정 가능

el표현식 - MVC패턴 2 ( JSP에는 최대한 java코드가 없도록 )

el 표현식 ${key} ==> key에 해당하는 value값을 출력하란 의미

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%--
	//String msg = (String)request.getAttribute("message");
	//String loc = (String)request.getAttribute("loc");
	//request, session, application에 저장한 값들을 el 표현식으로 출력해 사용할 수 있다.
--%>
<script>
	alert('${message}');
	location.href='${loc}';
</script>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
	java.util.List<memo.model.MemoVO> memoArr
	=(java.util.List<memo.model.MemoVO>)request.getAttribute("memoArr");
	out.println(memoArr);
	https://tomcat.apache.org/download-taglibs.cgi
	에서 Taglibs로 이동하여 jar파일 4개를 다운로드 받아
	프로젝트/WebContent/WEB-INF/lib에 붙여넣기
--%>
<link rel='stylesheet' type='text/css' href='CSS/memo.css'>
<div id="wrap" style="width:90%;margin:auto">
	<h1 style="text-align:center">::한줄 메모장 목록::</h1>
	<table border="1">
		<tr>
			<th width="10%">글번호</th>
			<th width="60%">글내용</th>
			<th width="15%">작성자</th>
			<th width="15%">수정|삭제</th>
		</tr>
		<c:if test="${memoArr!=null}">
			<c:forEach var="memo" items="${memoArr}">
				<tr>
					<td>${memo.idx}</td>
					<td>${memo.msg } [${memo.wdate }]</td>
					<td>${memo.name }</td>
					<td><a>수정</a>|<a>삭제</a></td>
				</tr>
			</c:forEach>
		</c:if>
	</table>
</div>

 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
jQuery

이벤트의 pageX, pageY 속성
: 전체 문서(document)에 해당하는 좌표값을 가져온다.
이벤트의 clientX, clientY 속성
: 브라우저에서 보이는 영역에서의 현재 위치값 보이는 영역에서의 마우스 좌표값이 필요한 경우 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ex27_pageclidntXY.html</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <style>
        #demo{
            width:1800px;
            height:1800px;
            display: block;
            border:cadetblue thick solid;
            overflow: scroll;
        }
    </style>
    <script>
        $(()=>{
            var $demo = $('#demo');
            $demo.click((e)=>{
                //클릭한 지점의 x,y좌표를 알아내어 출력하자
                // $("#result").html("x: "+e.pageX+"Y: "+e.pageY)
                //             .css("color","red");
                $("#result").html("x: "+e.clientX+"Y: "+e.clientY)
                            .css("color","red");
            })
        })
    </script>
</head>
<body>
    <h1>event.pageX 와 event.pageY</h1>
    <h1>client.pageX 와 client.pageY</h1>
    <div id="result">
    
    </div>
    <div id="demo">

    </div>
</body>
</html>

dragdrop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #wrap{
            margin: 50px;
        }
        .select{
            width: 800px;
            height: 100px;
            border: 1px solid seagreen;
        }
        .select img{
            width:150px;
            float:left;
        }
        .container{
            position: absolute;
            width: 800px;
            height: 400px;
            border: 1px crimson solid;
        }
        .container img{
            position: absolute;
            width:100px;

        }
    </style>
    <script>
        function init(){
            var obj=null;
            var isDrag=false;
            var $img=$('.container img')
            //alert($img.length)
            // for(var i=0;i<$img.length;i++){
            //     var y = Number.parseInt(Math.random()*300);
            //     var x = Number.parseInt(Math.random()*700);
            //     $('img').eq(i).css("left",x).css("top",y);
            // }
            $img.each(function(i, item){
                //item==>이미지 i==>인덱스 번호
                var y = Number.parseInt(Math.random()*300);
                var x = Number.parseInt(Math.random()*700);
                $(item).css({
                    'left': x,
                    'top': y
                })
            })
            //mousedown=> mousemove ==> mouseup 이벤트 처리
            //드래그 시작                드래그 종료
            //마우스를 움직이는 동안 해당 좌표를 얻어와야 함
            $img.on('mousedown',function(e){
                console.log('mousedown');
                obj=$(this);
                isDrag=true;
            }).on('mousemove',function(e){
                if(isDrag){
                    e.preventDefault();
                    var mx = e.pageX;
                    var my = e.pageY;
                    obj.offset({
                        'left':mx-(obj.width())/2,
                        "top":my-(obj.height())/2
                    })
                    console.log(mx+"/"+my);
                }
            }).on('mouseup',function(e){
                console.log('mouseup');
                obj=null;
                isDrag=false;
            })
        }
        $(()=>{
            //문제1 초기 시작시 .container영역에 있는 이미지를 랜덤하게 출력되도록 좌표값을 잡으세요
            //.container 영역을 넘어서 위치하지 않게 주의하기 Math.random()이용하여 x,y좌표를 랜덤하게 구한뒤
            //각각의 이미지에 적용 css==> left,top
            init();
            

            
        })
    </script>
</head>
<body>
    <div id="wrap">
        <div class="select">
            <!-- 여기에 이미지를 드래그 앤 드랍하여 추가할 예정-->
        </div>
        <div class="container">
            <img src="banners/1.png">
            <img src="banners/2.png">
            <img src="banners/3.png">
            <img src="banners/4.png">
            <img src="banners/5.png">
        </div>
    </div>
</body>
</html>