서론
작성해둔 이유는 전에 포스팅한 페이징 소스와 같습니다.
주제가 공간대여 홈페이지다 보니 아무리 파트를 나눠서 작업해도 이미지 업로드 기능이 거의 모든 파트에 필요했었습니다.
다들 CRUD야 수업떄 해봤지만 이미지 업로드까지는 쌩으로 습득하다가 프로젝트 작업이 지연될 것 같아서,
각자 작업물에 맞게 수정해서 쓸수있게끔 프로토 타입 소스를 제작해서 공유했습니다.
추가로 게시판 파트를 위해 업로드된 파일을 다운로드하는 기능도 추가해 뒀습니다.
MVC model2로 개발했지만, 구조는 편의상 MVCS구조 나타냈구요,
이번엔 소스가 굉징히 많아서 깃으로 보시는게 좋습니다 ^^ 본문에서는 간단하게 포스팅하겠습니다.
주석도 엄청 상세히 달려있답니다!
https://github.com/gr2nsky/ProtoType/tree/main/Paging_imageCRUD_fileDown
gr2nsky/ProtoType
Contribute to gr2nsky/ProtoType development by creating an account on GitHub.
github.com
이번 프로그램에는 cos.jar가 꼭 필요하니, 다운받으셔서 WEB-INF/lib 폴더 추가 및 server의 lib폴더에도 추가해 주세용!
추가로 해당 프로그램에 사용한 DB 백업본도 첨부합니다.
구성
- Controller
- homeController.java
- Common
- FilePath.java
- Modle
- Service
- Command.javaDeleteCommand.java
- WriteCommand.java
- ModiftCommand.java
- ContentCommand.java
- Service
-
- DTO
- Dto.java
- DAO
- Dao.java
- DTO
- VIew
- content.jsp
- list.jsp
- write.jsp
특이사항
1. 페이징
https://greensky0026.tistory.com/146 을 참고해주세요.
2. 이미지 업로드
a. 기존 form과의 차이
- 일반적인 form 태그에 enctype="multipart/form-data" 속성을 추가해주어야 합니다.
- <input type="file" >태그를 입력하면
가 자동으로 생성됩니다.
b. 기존 Service와의 차이
- 그냥 request로 값을 받아오는게 아니라 MultipartRequest를 사용해야 한다.
- MultipartRequest는 인스턴스 생성시점에 파일을 저장하게 된다.
c. 이미지 파일이 서버에 저장된다면, DB에는 뭘 기입할까요?
- 이미지 파일의 상대주소를 기입하면 된다.
3. 업로드한 이미지 보기
- img 태그를 사용해 src속성으로 업로드한 파일의 상대주소를 입력해주면 된다.
4. 이미지(파일) 다운로드
- a태그를 사용하여 herf속성에 파일의 상대주소를 입력하고 download속성을 명시하면 된다.
번외. JQuery를 사용해 업로드 이미지 미리보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File preview</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview')
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<body>
<form action="fileUploadAction.jsp" method="post" enctype="multipart/form-data">
이름 : <input type="text" name="title">
<br>
제목 : <input type="text" name="content">
<br>
이미지 : <input type="file" name="uploadfile" onchange="readURL(this);">
<br>
<img id="preview" src="" alt="image" style="width:100px" />
<br>
<input type="submit" value="submit" >
</form>
</body>
</html>
HTML
<input type="file" name="uploadfile" onchange="readURL(this);">
- onchacnge 속성을 추가해서 file을 선택하거나 추가될때 readURL을 호출합니다.
Jquery
function readURL(input)
- a. 파일이 없다면 미리보기를 띄우지 않습니다
- b. FileReader는 단순히 이미지파일을 읽어주는 역할입니다.
- c. reader.onload = function (e) 를 통해 FileReader가 작동할때 이벤트를 설정해줍니다.
위와같이 작성하게 되면
파일을 추가하거나 변경하게 되면 onchange에 의해 readURL()이 실행되고,
readURL()에선 FileReader에 파일을 읽게 하고 읽은 파일을 어디에 보여줄지를 선택해 보여주게 됩니다.
'IDE & Framework > 분류중' 카테고리의 다른 글
| JS 상호작용되는 달력 만들기 (2) - 날짜 검색 달력 (1) | 2021.05.31 |
|---|---|
| JS 상호작용되는 달력 만들기 (1) - 시작하며 (1) | 2021.05.31 |
| JSP 페이징된 게시판 만들기 (0) | 2021.05.30 |
| JSP 회원가입시 이메일 인증 절차 - (4/4) 인증 이메일 전송 및 인증 (0) | 2021.05.30 |
| JSP 회원가입시 이메일 인증 절차 - (3/4) 이메일 중복 확인 (0) | 2021.05.30 |