board/modify.html
페이지 정보
본문
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{include/layout.html}">
<body>
<div layout:fragment="content">
<br>
<center>
<h1>MODIFY</h1>
<form method="post">
<input type="hidden" name="bno" th:value="${dto.bno}">
<table width="700" border="1">
<tr>
<th width="50">제목</th>
<td><input name="title" style="width:100%;" th:value="${dto.title}"></td>
</tr>
<tr>
<th>내용</th>
<td><textarea name="content" style="width:100%;height:100px;">[[${dto.content}]]</textarea></td>
</tr>
<tr>
<th>작성자</th>
<td><input name="writer" th:value="${dto.writer}" readonly></td>
</tr>
<tr>
<th>첨부</th>
<td><input type="button" value="ADD FILES" class="uploadFileBtn"></td>
</tr>
<tr>
<th></th>
<td><button class="submitBtn">수정</button></td>
</tr>
</table>
<div class="uploadHidden"></div>
</form>
<!-- 첨부 목록 -->
<table width="700" border="0" class="uploadResult">
<!-- 등록된 첨부파일 목록 -->
<th:block th:each="fileName : ${dto.fileNames}">
<tr class="card" th:with="arr = ${fileName.split('_')}">
<td>
[[${arr[1]}]]
<button th:onclick="removeFile([[${arr[0]}]],[[${arr[1]}]],this)">X</button>
<br>
<img th:src="|/view/s_${fileName}|" th:data-src="${fileName}">
</td>
</tr>
</th:block>
</table>
<!-- 첨부 등록 -->
<style>
.uploadModal {
width: 300px;
height: 100px;
background-color: gray;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
padding: 10px;
z-index: 1000;
}
.td_white{ color:white; }
</style>
<table border=0 class="uploadModal" style="display:none;">
<tr>
<td></td>
<td class="td_white"><b>[ 파일 등록 ]</b></td>
</tr>
<tr>
<td class="td_white">첨부</td>
<td><input type="file" name="files" multiple></td>
</tr>
<tr>
<td></td>
<td>
<button class="uploadBtn">파일 등록</button>
<button class="closeUploadBtn">창 닫기</button>
</td>
</tr>
</table>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="/js/upload.js"></script>
</center>
<br>
</div>
<th:block layout:fragment="script">
<script th:inline="javascript">
//파일첨부 모달창 열기
document.querySelector(".uploadFileBtn").addEventListener("click", function (e){
$(".uploadModal").show();
},false)
//파일첨부 모달창 닫기
document.querySelector(".closeUploadBtn").addEventListener("click", function (e){
$(".uploadModal").hide();
},false)
//모달창의 파일 업로드와 썸네일 출력 (파일 등록 클릭시 )
document.querySelector(".uploadBtn").addEventListener("click", function (e){
const formObj = new FormData();
const fileInput = document.querySelector("input[name='files']")
console.log(fileInput.files) //콘솔 확인
const files = fileInput.files
for(let i=0; i<files.length; i++){
formObj.append("files",files[i]);
}
uploadToServer(formObj).then(result => {
console.log(result)
for(const uploadResult of result){
showUploadFile(uploadResult) //아래 참조
}
//uploadModal.hide();
$(".uploadModal").hide();
}).catch(e => {
//uploadModal.hide();
$(".uploadModal").hide();
})
},false)
//첨부목록 출력
const uploadResult = document.querySelector(".uploadResult")
function showUploadFile({uuid, fileName, link}){
const str = `<tr class="card">
<td>
${fileName}
<button onclick="javascript:removeFile('${uuid}','${fileName}',this)">X</button>
<br>
<img src="/view/${link}" data-src="${uuid+"_"+fileName}">
</td>
</tr>`
uploadResult.innerHTML += str
}
//첨부파일 삭제
function removeFile(uuid, fileName, obj){
console.log(uuid)
console.log(fileName)
console.log(obj)
const targetTr = obj.closest(".card")
removeFileToServer(uuid, fileName).then(data => {
targetTr.remove()
})
}
//최종 게시물,첨부파일 DB 등록 처리
document.querySelector(".submitBtn").addEventListener("click", function (e){
const target = document.querySelector(".uploadHidden")
const uploadFiles = uploadResult.querySelectorAll("img")
let str = ""
for(let i=0; i<uploadFiles.length; i++){
const uploadFile = uploadFiles[i]
const imgLink = uploadFile.getAttribute("data-src")
str += `<input type="hidden" name="fileNames" value="${imgLink}">`
}
target.innerHTML = str;
document.querySelector("form").submit();
},false)
</script>
</th:block>
</body>
</html>
- 이전글board/read.html 24.07.04
- 다음글● 게시물과 첨부파일 등록 처리 24.07.03
댓글목록
등록된 댓글이 없습니다.