블로그 저장 안 해서 다 날렸다 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
파일업로드
- 반드시 post 이어야한다
- enctype="multipart/form-data 지정해야한다.
- <input type = "file" />
- *.jar 필요하다. (cos-05Nov2002.jar)
- 가상폴더와 실제폴더 두군데를 자리잡고 들어감
가상폴더는 눈에보이는것 실제폴더는 실제위치
webapp 안에 storage폴더 만들기
1. 가상폴더
D:\Web\workspace\projectMVC\src\main\webapp\storage
2. 실제폴더 - 파일이 업로드 되는 위치
D:\Web\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\projectMVC\storage
이미지에서 배경 지우는 사이트
ImageBoardWriteService
imageboard.sql
-- [테이블] Oracle
CREATE TABLE imageboard(
seq NUMBER PRIMARY KEY,
imageId VARCHAR2(20) NOT NULL, -- 상품코드
imageName VARCHAR2(40) NOT NULL, -- 상품명
imagePrice NUMBER NOT NULL, -- 단가
imageQty NUMBER NOT NULL, -- 개수
imageContent VARCHAR2(4000) NOT NULL,
image1 varchar2(200),
logtime DATE DEFAULT SYSDATE
);-- [시퀀스]
create sequence seq_imageboard nocache nocycle;menu.jsp
<ul class="mainnav">
<c:if test="${sessionScope.memId != null }">
<li><a href="${ pageContext.request.contextPath }/board/boardWriteForm.do">글쓰기</a></li>
<c:if test="${sessionScope.memId == 'admin'}">
<li><a href="${ pageContext.request.contextPath }/imageboard/imageboardWriteForm.do">이미지 등록</a></li>
</c:if>
</c:if>
<li><a href="${ pageContext.request.contextPath }/board/boardList.do?pg=1">목록</a></li>
<li><a href="${ pageContext.request.contextPath }/imageboard/imageboardList.do">이미지 목록</a></li>
</ul>관리자 계정인 admin 111 로 로그인했을 때만 이미지를 등록할 수 있게 한다 !!
command.properties
#이미지 등록
/imageboard/imageboardWriteForm.do=imageboard.service.ImageboardWriteFormService
/imageboard/imageboardWrite.do=imageboard.service.ImageboardWriteServiceImageboardWriteFormService.java
package imageboard.service;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.control.CommandProcess;
public class ImageboardWriteFormService implements CommandProcess {
@Override
public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
return "/imageboard/imageboardWriteForm.jsp";
}
}<body>
<div id="header">
<h1>
<img alt="하트" src="${ pageContext.request.contextPath }/image/free-icon-love-4096198.png" width="60" height="60" onclick="location.href='${ pageContext.request.contextPath }/index.do'">
MVC를 활용한 미니프로젝트
</h1>
</div>
<hr/>
<div id="container">
<jsp:include page="../main/imageboardMenu.jsp" />
<div id="section">
<%-- <img src="../image/free-icon-love-4096198.png" alt="홈" width="60" height="60" onclick="location.href='${ pageContext.request.contextPath }/index.do'" /> --%>
<form id="imageboardWriteForm" method="post" enctype="multipart/form-data"
action="/projectMVC/imageboard/imageboardWrite.do">
<!-- enctype="application/x-www-form-urlencoded" -->
<table border="1">
<tr>
<th>상품코드</th>
<td>
<input type="text" name="imageId" id="imageId" size="65"/>
<div class="red" id="imageIdDiv"></div>
</td>
</tr>
<tr>
<th>상품명</th>
<td>
<input type="text" name="imageName" id="imageName" size="65"/>
<div class="red" id="imageNameDiv"></div>
</td>
</tr>
<tr>
<th>단가</th>
<td>
<input type="text" name="imagePrice" id="imagePrice" size="65"/>
<div class="red" id="imagePriceDiv"></div>
</td>
</tr>
<tr>
<th>개수</th>
<td>
<input type="text" name="imageQty" id="imageQty" size="65"/>
<div class="red" id="imageQtyDiv"></div>
</td>
</tr>
<tr>
<th>내용</th>
<td>
<textarea name="imageContent" id="imageContent" cols="65" rows="15"></textarea>
<div class="red" id="iamgeContentDiv"></div>
</td>
</tr>
<tr>
<td colspan="2">
<img id="showImg" width="70" height="70" /> 
<img src="../image/camera.png" alt="카메라" id="camera" width="50px" height="50px" />
<input type="file" id="image1" name="image1" style="visibility: hidden" />
<div id="image1Div"></div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="이미지 등록" />
<!--<input type="button" id="imageboardWriteBtn" value="이미지 등록" /> -->
<input type="reset" value="다시작성" />
</td>
</tr>
</table>
</form>
</div>
</div><script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$('#camera').click(function(){
$('#image1').trigger('click'); //강제 이벤트 발생
});카메라 이미지를 누르면 자동으로 파일등록하는게 열리도록 강제 이벤트를 발생시킨다 !!
FileReader 란?
FileReader는 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해
File 또는 Blob 객체를 편리하게 처리할수있는 방법을 제공하는 객체이며
abort, load, error와 같은 이벤트에서 발생한 프로세스를 처리하는데 주로 사용되며,
File 또는 Blob 객체를 읽어서 result 속성에 저장한다.
FileReader도 비동기로 동작한다.
FileReader.onload()
load 이벤트의 핸들러. 이 이벤트는 읽기 동작이 성공적으로 완료되었을 때마다 발생한다.
//선택한 이미지 확인하기
$('#image1').change(function(){
readURL(this);
});
function readURL(input){
var reader = new FileReader();
var show;
reader.onload = function(e){
$('#showImg').attr('src', e.target.result); //e.target - 이벤트가 발생하는 요소를 반환해준다.
}
reader.readAsDataURL(input.files[0]);
}
$('#imageboardWriteBtn').click(function(){
});
</script>
</body>
</html>
ImageboardWriteService.java
package imageboard.service;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.control.CommandProcess;
import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;
import imageboard.bean.ImageboardDTO;
import imageboard.dao.ImageboardDAO;
public class ImageboardWriteService implements CommandProcess {
@Override
public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
//실제폴더
String realFolder = request.getServletContext().getRealPath("/storage");
System.out.println("realFolder = " + realFolder);
//업로드
/*
MultipartRequest multi = new MultipartRequest(
request,
realFolder,
5 * 1024 * 1024, //5MB
"UTF-8");
*/
MultipartRequest multi = new MultipartRequest(
request,
realFolder, //이미지가 저장되는 위치
5 * 1024 * 1024, //5MB
"UTF-8",
new DefaultFileRenamePolicy()); //똑같은 이름이 업로드되면 파일명을 변경해서 올린다.
//데이터
String imageId = multi.getParameter("imageId");
String imageName = multi.getParameter("imageName");
int imagePrice = Integer.parseInt(multi.getParameter("imagePrice"));
int imageQty = Integer.parseInt(multi.getParameter("imageQty"));
String imageContent = multi.getParameter("imageContent");
String image1 = multi.getOriginalFileName("image1");
String fileName = multi.getFilesystemName("image1"); //파일명만 DB에 저장
System.out.println(image1 + ", " + fileName);
ImageboardDTO imageboardDTO = new ImageboardDTO();
imageboardDTO.setImageId(imageId);
imageboardDTO.setImageName(imageName);
imageboardDTO.setImagePrice(imagePrice);
imageboardDTO.setImageQty(imageQty);
imageboardDTO.setImageContent(imageContent);
imageboardDTO.setImage1(image1); // 파일명만 DB에 저장된다.
System.out.println(imageId);
System.out.println(imageName);
System.out.println(imagePrice);
System.out.println(imageQty);
System.out.println(imageContent);
System.out.println(image1);
ImageboardDAO imageboardDAO = ImageboardDAO.getInstance();
imageboardDAO.imageboardWrite(imageboardDTO);
return "/imageboard/imageboarWrite.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>
<script type="text/javascript">
window.onload=function(){
alert("이미지 등록 완료");
location.href = "/projectMVC/imageboard/imageboardList.do?pg=1"
}
</script>
</body>
</html>
제약조건 변경 ( 원래 unique로 했었는데 그럼 똑같은 파일 또 등록못하므로 !! ) ---> not null로 바꾸자
drop table imageboard purge;CREATE TABLE imageboard(
seq NUMBER PRIMARY KEY,
imageId VARCHAR2(20) NOT NULL, -- 상품코드
imageName VARCHAR2(40) NOT NULL, -- 상품명
imagePrice NUMBER NOT NULL, -- 단가
imageQty NUMBER NOT NULL, -- 개수
imageContent VARCHAR2(4000) NOT NULL,
image1 varchar2(200),
logtime DATE DEFAULT SYSDATE
);
'JSP & Servlet' 카테고리의 다른 글
| DAY 56 - 이미지 등록 AJax 이용하기 / 이미지 전체선택 전체해제 / 이미지 선택삭제 ( 2024.09.24 ) (0) | 2024.09.24 |
|---|---|
| DAY 54 - ProjectMVC 목록 / 상세보기 (2024.09.20) (0) | 2024.09.20 |
| DAY 53 - projectMVC - 로그인 / 로그아웃 / 회원가입 / 회원정보수정 / 글쓰기 / 글목록 (0) | 2024.09.19 |
| DAY 52 - MVC ( 2024.09.13 ) (0) | 2024.09.13 |
| DAY 51 - EL_JSTL ( 2024.09.12 ) (0) | 2024.09.12 |
