반응형
- 배우는 모든 내용은 끝난 것
- 나머지는 이제 버전 별로 계속 반복
- 배운거
- 회원가입, 게시판 , 장바구니 , 비동기 , 파일 업로드
- jsp . db . servlet . spring . node
- D03_session_upload
- 라이브러리 cos.jar
- 01_파일한개
- index.jsp
<%@page import="java.time.LocalDateTime"%>
<%@ page import="java.util.Arrays" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
int boardSize = 0;
int boardLastNumber = 1;
int[] boardNumberList = new int[1000];
String[] boardSubjectList = new String[1000];
String[] boardContentList = new String[1000];
for(int i=0; i<3; i++) {
boardNumberList[i] = i + 1;
boardSubjectList[i] = "제목" + boardLastNumber;
boardContentList[i] = "내용" + boardLastNumber;
boardSize += 1;
boardLastNumber += 1;
}
// 게시판정보
session.setAttribute("boardSize", boardSize);
session.setAttribute("boardLastNumber", boardLastNumber);
session.setAttribute("boardNumberList", boardNumberList);
session.setAttribute("boardSubjectList", boardSubjectList);
session.setAttribute("boardContentList", boardContentList);
int boardImageSize = 0;
int boardImageLastNumber = 1;
int[] boardImageNumberList = new int[1000];
int[] boardImageBoardNumberList = new int[1000];
String[] boardImageNameList = new String[1000];
session.setAttribute("boardImageSize", boardImageSize);
session.setAttribute("boardImageLastNumber", boardImageLastNumber);
session.setAttribute("boardImageNumberList", boardImageNumberList);
session.setAttribute("boardImageBoardNumberList", boardImageBoardNumberList);
session.setAttribute("boardImageNameList", boardImageNameList);
%>
<%
response.sendRedirect("boardMain.jsp");
%>- boardWriteForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String tdColor = "lightblue";
%>
<jsp:include page="header.jsp"></jsp:include>
<br><br>
<div align="center">
<h2>새 게시글 작성하기</h2>
<form id="FILE_FORM" method="post" enctype="multipart/form-data">
<!-- file form 찾기 위해서
enctype="multipart/form-data" 명령어를 넣어주어야 한다.
-->
<table border="1">
<tr height="40">
<td width="150" align="center" bgcolor="<%= tdColor %>">제목</td>
<td width="450"><input type="text" id="subject" name="subject"></td>
</tr>
<tr height="40">
<td width="150" align="center" bgcolor="<%= tdColor %>">글내용</td>
<td width="450"><textarea rows="10" cols="50" id="content" name="content"></textarea></td>
</tr>
<tr height="40">
<td width="150" align="center" bgcolor="<%= tdColor %>">사진첨부</td>
<td width="450" id="box">
<p></p>
<input type="file" name="file1">
<p></p>
</td>
</tr>
<tr height="40">
<td width="150" align="center" colspan="2" bgcolor="<%= tdColor %>">
<button id="button-boardWritePro">글쓰기</button>
<button id="button-boardMain">메인화면</button>
</td>
</tr>
</table>
</form>
</div>
<script>
let boardWritePro = (event) => {
event.preventDefault(); //이벤트 제거 . 페이지 이동을 강제로 막는다.
let form = document.querySelector("#FILE_FORM"); //가져오기
let formData = new FormData(form); //new FromData(form);
/*
옵션 7개
$.ajax ({1,2,3,4,5,6,7})
1 => url : 'boardWritePro.jsp'
2 => processData : false
3 => contentType: false
4 => data : formData => new FormData();
5 => type : 'POST'
6 => success : function (result){
성공하면 여기로 들어온다. result => html
}
7 => error : function (){}
*/
$.ajax({
url: 'boardWritePro.jsp',
processData: false,
contentType: false,
data: formData,
type: 'POST',
success: function(result){
alert("게시글을 작성했습니다.");
location.href="boardMain.jsp";
},
});
return true;
}
let boardMain = (event) => {
event.preventDefault();
location.href='boardMain.jsp';
}
let num = 1;
let $btnBoardWritePro = document.querySelector("#button-boardWritePro");
$btnBoardWritePro.addEventListener("click", boardWritePro);
let $btnBoardMain = document.querySelector("#button-boardMain");
$btnBoardMain.addEventListener("click", boardMain);
</script>
</body>
</html>- boardWritePro.jsp
<%@page import="java.time.LocalDateTime"%>
<%@page import="java.io.Console"%>
<%@page import="java.util.Enumeration"%>
<%@page import="java.io.File"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//-----------------------------------------------------------------------------------------------------
int boardSize = (int)session.getAttribute("boardSize");
int boardLastNumber = (int)session.getAttribute("boardLastNumber");
int[] boardNumberList = (int[])session.getAttribute("boardNumberList");
String[] boardSubjectList = (String[])session.getAttribute("boardSubjectList");
String[] boardContentList = (String[])session.getAttribute("boardContentList");
//-----------------------------------------------------------------------------------------------------
int boardImageSize = (int)session.getAttribute("boardImageSize");
int boardImageLastNumber = (int)session.getAttribute("boardImageLastNumber");
int[] boardImageNumberList = (int[])session.getAttribute("boardImageNumberList");
int[] boardImageBoardNumberList = (int[])session.getAttribute("boardImageBoardNumberList");
String[] boardImageNameList = (String[])session.getAttribute("boardImageNameList");
%>
<%
// 이미지 파일을 저장할때는 application.getRealPath("") 를 사용한다.
String filePathStr = application.getRealPath("");
//application.getRealPath 카피본이 있는 위치
// 여기는 맨 앞에 슬러시를 붙이지 않는다.
filePathStr += "01_파일한개/uploadFile";
//폴더를 한개 만들어야 한다.
//카피본에서 이미지가 저장될 폴더, 원본은 그냥 비여있다.
//"/" 슬러쉬 안 붙인다. 앞에
System.out.println(filePathStr);
try{
int maxPostSize= 1024*1024*10; //용량 . 1바이트 => 1024 * 1024 => 1메가. 10메가
String encoding="UTF-8"; //인코딩
MultipartRequest mr = new MultipartRequest(request, filePathStr, maxPostSize, encoding, new DefaultFileRenamePolicy());
//임포트 시켜야 됨.
//옵션
//1번. request. |2번 이미지 폴더(카피본+폴더) filePathStr | 3. maxPostSize 10메가 | encoding 인코딩 | DefaultFileRenamePolicy 기본 파일 이름변경 정책. 이름이 똑같으면 알아서 이름 바꿔라.
//파일을 가져오는것 /아직 세팅만 한것
String subject = mr.getParameter("subject"); //꺼내오기 /제목
String content = mr.getParameter("content"); //꺼내오기 /글 내용 / requset 꺼내듯이 그냥 mr.getParmeter
boardNumberList[boardSize] = boardLastNumber;
boardSubjectList[boardSize] = subject;
boardContentList[boardSize] = content;
//배열에 담은것
String item="";
String ofileName="";
String reFileName="";
Enumeration fileList= mr.getFileNames();
//이미지 꺼내기
//Enumeration => 파일 이미지를 꺼내는 클래스
//이미지 꺼내는 클래스 저장
String sql = "";
//이미지는 한번에 하나씩 밖에 못 꺼낸다.
while(fileList.hasMoreElements()){ //첨부파일 끝까지 계속 반복
//이미지가 있으면
item = (String)fileList.nextElement(); //이미지를 꺼내라.
System.out.println("item = " + item.toString()); //출력
ofileName=mr.getOriginalFileName(item); //원본 파일명
reFileName=mr.getFilesystemName(item); // 변경된 파일명 (파일명이겹치지않으면 원본과 같은이름으로저장)
boardImageNumberList[boardImageSize] = boardImageSize + 1;
boardImageBoardNumberList[boardImageSize] = boardNumberList[boardSize];
boardImageNameList[boardImageSize] = reFileName;
//배열
boardImageSize += 1;
boardImageLastNumber += 1;
}
boardSize += 1;
boardLastNumber += 1;
//---------------------------------------------------------------------------
session.setAttribute("boardSize", boardSize);
session.setAttribute("boardLastNumber", boardLastNumber);
session.setAttribute("boardNumberList", boardNumberList);
session.setAttribute("boardSubjectList", boardSubjectList);
session.setAttribute("boardContentList", boardContentList);
//---------------------------------------------------------------------------
session.setAttribute("boardImageSize", boardImageSize);
session.setAttribute("boardImageLastNumber", boardImageLastNumber);
session.setAttribute("boardImageNumberList", boardImageNumberList);
session.setAttribute("boardImageBoardNumberList", boardImageBoardNumberList);
session.setAttribute("boardImageNameList", boardImageNameList);
}
catch(Exception e){
e.printStackTrace();
}
%>- 02_파일여러개
- boardWriteForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String tdColor = "lightblue";
%>
<jsp:include page="header.jsp"></jsp:include>
<br><br>
<div align="center">
<h2>새 게시글 작성하기</h2>
<form id="FILE_FORM" method="post" enctype="multipart/form-data">
<table border="1">
<tr height="40">
<td width="150" align="center" bgcolor="<%= tdColor %>">제목</td>
<td width="450"><input type="text" id="subject" name="subject"></td>
</tr>
<tr height="40">
<td width="150" align="center" bgcolor="<%= tdColor %>">글내용</td>
<td width="450"><textarea rows="10" cols="50" id="content" name="content"></textarea></td>
</tr>
<tr height="40">
<td width="150" align="center" bgcolor="<%= tdColor %>">사진첨부</td>
<td width="450" id="box">
<p></p>
<button id="button-addPicture">사진추가</button>
<p></p>
</td>
</tr>
<tr height="40">
<td width="150" align="center" colspan="2" bgcolor="<%= tdColor %>">
<button id="button-boardWritePro">글쓰기</button>
<button id="button-boardMain">메인화면</button>
</td>
</tr>
</table>
</form>
</div>
<script>
//버튼 생기게 하는것
let addPicture = (event) => {
event.preventDefault(); //버튼 막기
if(num == 6){
alert("사진은 5장까지 업로드 가능합니다.");
return;
}
//태그들 생성
//사진 추가를 누르면 태그가 생긴다.
let $box = document.getElementById("box");
let $line = document.createElement('span');
$line.className = 'line';
let $newP1 = document.createElement('span');
let fileNumber = "file" + num + "";
let str = "<input type='file' value='추가' name='";
str += fileNumber + "'>";
$newP1.innerHTML = str;
$line.appendChild($newP1);
let $newP2 = document.createElement('span');
str = "<input type='button' value='삭제' onclick='delPicture(this)'><p></p>";
$newP2.innerHTML = str;
$line.appendChild($newP2);
$box.appendChild($line);
num += 1;
}
//지우는것
let delPicture = (event) => {
let $lineList = document.querySelectorAll('.line');
for(let i=0; i<$lineList.length; i++) {
if($lineList[i].children[1].children[0] == event) {
console.log(i);
$lineList[i].remove();
num -= 1;
break;
}
}
}
let boardWritePro = (event) => {
event.preventDefault();
let form = document.querySelector("#FILE_FORM");
let formData = new FormData(form);
$.ajax({
url: 'boardWritePro.jsp',
processData: false,
contentType: false,
data: formData,
type: 'POST',
success: function(result){
alert("게시글을 작성했습니다.");
location.href="boardMain.jsp";
},
});
return true;
}
let boardMain = (event) => {
event.preventDefault();
location.href='boardMain.jsp';
}
let num = 1;
let $btnAddPicture = document.querySelector("#button-addPicture");
$btnAddPicture.addEventListener("click", addPicture);
let $btnBoardWritePro = document.querySelector("#button-boardWritePro");
$btnBoardWritePro.addEventListener("click", boardWritePro);
let $btnBoardMain = document.querySelector("#button-boardMain");
$btnBoardMain.addEventListener("click", boardMain);
</script>
</body>
</html>- boardWritePro.jsp
<%@page import="java.time.LocalDateTime"%>
<%@page import="java.io.Console"%>
<%@page import="java.util.Enumeration"%>
<%@page import="java.io.File"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//-----------------------------------------------------------------------------------------------------
int boardSize = (int)session.getAttribute("boardSize");
int boardLastNumber = (int)session.getAttribute("boardLastNumber");
int[] boardNumberList = (int[])session.getAttribute("boardNumberList");
String[] boardSubjectList = (String[])session.getAttribute("boardSubjectList");
String[] boardContentList = (String[])session.getAttribute("boardContentList");
//-----------------------------------------------------------------------------------------------------
int boardImageSize = (int)session.getAttribute("boardImageSize");
int boardImageLastNumber = (int)session.getAttribute("boardImageLastNumber");
int[] boardImageNumberList = (int[])session.getAttribute("boardImageNumberList");
int[] boardImageBoardNumberList = (int[])session.getAttribute("boardImageBoardNumberList");
String[] boardImageNameList = (String[])session.getAttribute("boardImageNameList");
%>
<%
String filePathStr = application.getRealPath(""); //카피본 위치
filePathStr += "02_파일여러개/uploadFile"; //폴더를 미리 만들어놓기. 원본은 비여놓기
System.out.println(filePathStr);
try{
int maxPostSize= 1024*1024*10;
String encoding="UTF-8";
MultipartRequest mr = new MultipartRequest(request, filePathStr, maxPostSize, encoding, new DefaultFileRenamePolicy());
String subject = mr.getParameter("subject");
String content = mr.getParameter("content");
boardNumberList[boardSize] = boardLastNumber;
boardSubjectList[boardSize] = subject;
boardContentList[boardSize] = content;
String item="";
String ofileName="";
String reFileName="";
Enumeration fileList= mr.getFileNames();
String sql = "";
while(fileList.hasMoreElements()){ //첨부파일 끝까지 계속 반복
item = (String)fileList.nextElement(); //이미지 꺼내기
ofileName=mr.getOriginalFileName(item); //원본 파일명
reFileName=mr.getFilesystemName(item); // 변경된 파일명 (파일명이 겹치지 않으면 변경안될수도있음)
boardImageNumberList[boardImageSize] = boardImageSize + 1;
boardImageBoardNumberList[boardImageSize] = boardNumberList[boardSize];
boardImageNameList[boardImageSize] = reFileName;
//db 넣기
boardImageSize += 1;
boardImageLastNumber += 1;
}
boardSize += 1;
boardLastNumber += 1;
//---------------------------------------------------------------------------
session.setAttribute("boardSize", boardSize);
session.setAttribute("boardLastNumber", boardLastNumber);
session.setAttribute("boardNumberList", boardNumberList);
session.setAttribute("boardSubjectList", boardSubjectList);
session.setAttribute("boardContentList", boardContentList);
//---------------------------------------------------------------------------
session.setAttribute("boardImageSize", boardImageSize);
session.setAttribute("boardImageLastNumber", boardImageLastNumber);
session.setAttribute("boardImageNumberList", boardImageNumberList);
session.setAttribute("boardImageBoardNumberList", boardImageBoardNumberList);
session.setAttribute("boardImageNameList", boardImageNameList);
}
catch(Exception e){
e.printStackTrace();
}
%>반응형
'코딩 > 4-JSP & SERVLET' 카테고리의 다른 글
| 02_이메일 (1) | 2025.07.09 |
|---|---|
| D04_session_API => 01_통계 (3) | 2025.07.09 |
| D02_session_async (0) | 2025.07.07 |
| C22_dao_board_re (0) | 2025.07.03 |
| C12_db_gisatest => 01_골프장 (1) | 2025.06.30 |