Published 2022. 8. 24. 16:19
이전글 보기
https://aamoos.tistory.com/689
[Spring Jpa] 17. 게시판 만들기 - 첨부파일 삭제 (InteliJ+Spring Data Jpa+QueryDsl+H2+타임리프+BootStrap5+Gradle)
이전글 보기 https://aamoos.tistory.com/688 [Spring Jpa] 16. 게시판 만들기 - 첨부파일 다운로드 목표 - 저번장에서 파일업로드후 테이블에 데이터를 쌓고, 파일을 저장하는것까지 하였습니다. 이번장에서
aamoos.tistory.com
게시글 수정하기 부분에서 파일추가하는 부분이 덜 된것같아서 그 부분을 수정해보겠습니다.
update.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/default_layout}">
<head layout:fragment="css">
<style>
.fieldError {
border-color: #bd2130;
}
.form-group p{
color: red;
}
</style>
</head>
<div layout:fragment="content" class="content">
<form th:action="@{'/update/' + *{id}}" th:object="${boardDto}" method="post" enctype="multipart/form-data">
<input type="hidden" name="_method" value="put"/>
<input type="hidden" id="boardId" name="id" th:value="*{id}"/>
<article>
<div class="container" role="main">
<div class="form-group">
<label for="title">제목</label>
<input type="text" class="form-control" id="title" name="title" th:value="*{title}"
placeholder="제목을 입력해 주세요"
th:class="${#fields.hasErrors('title')}? 'form-control fieldError' : 'form-control'">
<p th:if="${#fields.hasErrors('title')}" th:errors="*{title}">Incorrect date</p>
</div>
<br>
<div class="mb-3">
<label for="reg_id">작성자</label>
<input type="text" class="form-control" id="reg_id" name="regId" value="관리자" readonly>
</div>
<br>
<div class="mb-3">
<label for="content">내용</label>
<textarea class="form-control" rows="5" id="content" name="content" th:text="*{content}"
placeholder="내용을 입력해 주세요"></textarea>
</div>
<br>
<div class="mb-3">
<label for="content">첨부파일</label>
<p th:each="boardFile, index : ${boardFile}">
<a th:href="@{/fileDownload/{boardId}(boardId=${boardFile.fileId})}"
th:text="${boardFile.originFileName}">파일이름1.png</a>
<span>
<button th:fileId="${boardFile.boardFileId}" th:onclick="boardDelete(this.getAttribute('fileId'))"
type="button" class="btn btn-outline-danger">삭제</button>
</span>
</p>
</div>
<br>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">파일업로드</label>
<input class="form-control" type="file" id="formFileMultiple" name="multipartFile" multiple>
</div>
<br>
<div>
<button type="submit" class="btn btn-sm btn-primary" id="btnSave">수정</button>
<button onclick="location.href='/'" type="button" class="btn btn-sm btn-primary" id="btnList">목록
</button>
</div>
</div>
</article>
</form>
</div>
</html>
<script>
//글삭제
function boardDelete(fileId){
if (confirm("정말로 삭제하시겠습니까?")) {
//배열생성
const form = document.createElement('form');
form.setAttribute('method', 'post'); //Post 메소드 적용
form.setAttribute('action', '/boardFileDelete');
//파일 id
var input1 = document.createElement('input');
input1.setAttribute("type", "hidden");
input1.setAttribute("name", "fileId");
input1.setAttribute("value", fileId);
//게시판 id
const selectedElements = document.querySelector("#boardId")
var input2 = document.createElement('input');
input2.setAttribute("type", "hidden");
input2.setAttribute("name", "boardId");
input2.setAttribute("value", selectedElements.value);
form.appendChild(input1);
form.appendChild(input2);
console.log(form);
document.body.appendChild(form);
form.submit();
}
}
</script>수정버튼 클릭시 multipart/form-data 형식으로 post 방식으로 전송하는 부분을 추가하였습니다.
결과화면
테스트를 해보면 제목, 내용만 수정하면 해당 부분만 수정이되고, 파일을 첨부하고 수정을 누르면 선택한 파일들이 추가되는것을 볼수있습니다.
지금까지한 부분은 github에 올려놨습니다.
https://github.com/aamoos/newjpaboard.git
GitHub - aamoos/newjpaboard
Contribute to aamoos/newjpaboard development by creating an account on GitHub.
github.com
요즘에 회사일이 바빠져서 따로 개발할 시간을 내기가 어려워서 글을 작성하기가 어렵네요.. 목표는 게시판은 이정도까지만 구현하고 로그인, 회원가입, 댓글정도 개발하는것을 목표로 하고있습니다. 최대한 빠른시간에 다음장도 올릴수 있도록 하겠습니다. 부족한 글 봐주셔서 감사합니다.
'스프링' 카테고리의 다른 글
| intelij project 이름변경 (0) | 2022.11.22 |
|---|---|
| github에 project 올리기 (Share Project on Github) (0) | 2022.11.22 |
| [Spring Jpa] 17. 게시판 만들기 - 첨부파일 삭제 (InteliJ+Spring Data Jpa+QueryDsl+H2+타임리프+BootStrap5+Gradle) (2) | 2022.08.10 |
| [Spring Jpa] 16. 게시판 만들기 - 첨부파일 다운로드 (InteliJ+Spring Data Jpa+QueryDsl+H2+타임리프+BootStrap5+Gradle) (0) | 2022.08.10 |
| [Spring Jpa] @Builder 사용법 (0) | 2022.08.09 |