board/register.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>
<script th:inline="javascript">
/*<![CDATA[*/
var errors = /*[[${errors}]]*/ [];
var msg = "";
if(errors != null && errors.length > 0){
for(var i=0; i<errors.length; i++){
msg += errors[i].field + "는 " + errors[i].defaultMessage + "\n";
}
alert(msg);
}
/*]]>*/
</script>
<center>
<h1>RESISTER</h1>
<form th:action="@{register}" th:method="post">
<table width="700" border="1">
<tr>
<th width="50">제목</th>
<td><input name="title" style="width:100%;"></td>
</tr>
<tr>
<th>내용</th>
<td><textarea name="content" style="width:100%;height:100px;"></textarea></td>
</tr>
<tr>
<th>작성자</th>
<td><input name="writer"></td>
</tr>
<tr>
<th>첨부</th>
<td><input type="button" value="ADD FILES" class="uploadFileBtn"></td>
</tr>
<tr>
<th></th>
<td><button>글쓰기</button></td>
</tr>
</table>
</form>
<!-- 첨부 목록 -->
<table width="700" border="0" class="uploadResult">
</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()
})
}
</script>
</th:block>
</body>
</html>
[브라우저 결과물]
- 이전글js/upload.js 24.07.03
- 다음글board/register.html ( insert 처리 ) 24.07.03
댓글목록
등록된 댓글이 없습니다.