[HTML5] - 21 - 이미지첨부 기능 만드는 법
728x90
반응형
반응형
#주의#
이 글은 강의 글이 아니다.
틀린 부분, 깔끔하지 못한 부분 있을 수 있다.
지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다.
이번에는 게시글 작성할 때 이미지를 첨부할 수 있는 버튼을 만들어 볼 것이다.
게시글 작성 모달 창에 이미지 첨부 기능을 추가한다.
postImage라는 id를 가진 input 태그에 change 이벤트 리스너를 등록한다.
그리고, FileReader 객체를 이용하여 선택한 이미지 파일을 읽어와 미리 보기를 제공한다.
미리보기는 img 태그를 생성하여 postDiv에 삽입한다.
이미지 파일 선택 후 게시글을 작성하면, input 태그의 value를 초기화한다.
아래의 코드를 넣어주면 된다.
728x90
<div class="form-group">
<label for="postImage">이미지 첨부</label>
<input type="file" class="form-control-file" id="postImage">
</div>
아래는 전체적인 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이리의 맥 이야기</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.card-text,
.card-img-bottom {
display: none;
}
.card:hover .card-text,
.card:hover .card-img-bottom {
display: block;
}
</style>
</head>
<body style="background-color: black;">
<div class="hero text-center text-white py-5">
<h1 class="display-4">이리의 맥 이야기</h1>
<h2>컴온!!!!</h2>
<div class="btn-group my-3" role="group" aria-label="게시판">
<button type="button" class="btn btn-secondary" onclick="showBoard('notice')">공지사항</button>
<button type="button" class="btn btn-secondary" onclick="showBoard('board1')">게시판 1</button>
<button type="button" class="btn btn-secondary" onclick="showBoard('board2')">게시판 2</button>
</div>
</div>
<div class="container my-5">
<div id="notice">
<button type="button" class="btn btn-primary my-3" onclick="addPostPage('notice')">게시글 작성</button>
</div>
<div id="board1">
<button type="button" class="btn btn-primary my-3" onclick="addPostPage('board1')">게시글 작성</button>
</div>
<div id="board2">
<button type="button" class="btn btn-primary my-3" onclick="addPostPage('board2')">게시글 작성</button>
</div>
</div>
<div class="modal fade" id="addPostModal" tabindex="-1" role="dialog" aria-labelledby="addPostModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addPostModalLabel">게시글 작성</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="postTitle">제목</label>
<input type="text" class="form-control" id="postTitle">
</div>
<div class="form-group">
<label for="postContent">내용</label>
<textarea class="form-control" id="postContent" rows="5"></textarea>
</div>
<div class="form-group">
<label for="postImage">이미지 첨부</label>
<input type="file" class="form-control-file" id="postImage">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
<button type="button" class="btn btn-primary" onclick="addPost()">작성</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function getPosts(boardId) {
var posts = localStorage.getItem(boardId);
if (posts) {
document.getElementById(boardId).innerHTML = posts;
var deleteBtns = document.querySelectorAll("#" + boardId + " .btn-danger");
for (var i = 0; i < deleteBtns.length; i++) {
deleteBtns[i].addEventListener("click", function() {
this.parentNode.parentNode.remove();
savePosts(boardId);
});
}
}
}
function savePosts(boardId) {
var postsDiv = document.getElementById(boardId);
localStorage.setItem(boardId, postsDiv.innerHTML);
}
function addPost() {
var boardId = document.getElementById("addPostModal").dataset.boardId;
var title = document.getElementById("postTitle").value;
var content = document.getElementById("postContent").value;
var date = new Date().toLocaleString();
var postDiv = document.createElement("div");
postDiv.className = "card my-3";
postDiv.innerHTML = `
<div class="card-body">
<h3 class="card-title">${title}</h3>
<p class="card-text">${content}</p>
<p class="card-text"><small class="text-muted">${date}</small></p>
<button type="button" class="btn btn-danger my-3">삭제</button>
</div>
`;
var cardText = postDiv.querySelector(".card-text");
var postImage = document.getElementById("postImage");
postImage.addEventListener("change", function() {
var reader = new FileReader();
reader.onload = function() {
var imgPreview = document.createElement("img");
imgPreview.src = reader.result;
imgPreview.style.maxWidth = "100%";
postDiv.insertBefore(imgPreview, cardText);
}
reader.readAsDataURL(postImage.files[0]);
});
var deleteBtn = postDiv.querySelector(".btn-danger");
deleteBtn.addEventListener("click", function() {
postDiv.remove();
savePosts(boardId);
});
var postsDiv = document.querySelector("#" + boardId);
postsDiv.insertBefore(postDiv, postsDiv.firstChild);
savePosts(boardId);
document.getElementById("postTitle").value = "";
document.getElementById("postContent").value = "";
document.getElementById("postImage").value = "";
$('#addPostModal').modal('hide');
}
function addPostPage(boardId) {
$('#addPostModal').modal('show');
document.getElementById("addPostModalLabel").innerHTML = "게시글 작성 - " + boardId;
document.getElementById("addPostModal").dataset.boardId = boardId;
}
function showBoard(boardId) {
var boards = document.querySelectorAll(".container > div");
for (var i = 0; i < boards.length; i++) {
boards[i].style.display = "none";
}
document.getElementById(boardId).style.display = "block";
getPosts(boardId);
}
showBoard("notice");
</script>
</body>
</html>이제 게시판의 모양이 어느 정도 잡혀간다.
열심히 따라오면 홈페이지 하나 만드는 것은 일도 아닐 것이다.
728x90
반응형
'개발 이야기 > [HTML5]' 카테고리의 다른 글
| [HTML5] - 23 - 페이지네이션 기능이 추가된 웹페이지 만드는 법 (4) | 2023.05.10 |
|---|---|
| [HTML5] - 22 - 댓글기능 만드는 법 (2) | 2023.05.08 |
| [HTML5] - 20 - 게시글 작성 폼과 기능 만드는 법 (1) | 2023.05.07 |
| [HTML5] - 19 - 게시글 삭제 기능 만드는 법 (0) | 2023.05.06 |
| [HTML5] - 18 - 반응형 게시판 만드는 법 (2) | 2023.05.06 |
댓글