기능 추가하고 싶은데 도와주세요. 채택완료
그림과 같이 <+일정> 버튼을 누르면 파란색 네모친 구역이 일정2, 일정3으로 추가되게 하고,
<+일차> 버튼을 누르면 주황색 네모친 구역이 2일차, 3일차로 추가되게 하고 싶습니다.
그리고 파일 선택해서 사진을 올리면 파일이 여러 개 보이게 하고 싶습니다.
지금 제가 사진 올리면 파일 여러 개가 보이는데 그 외 일정 추가 버튼, 일차 추가 버튼을 누르면 추가가 되지 않습니다. 도와주세요.
Copy
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>여행기록write</title>
<style>
#preview-container {
display: flex;
flex-wrap: wrap;
}
.preview-image {
width: 200px;
height: 200px;
object-fit: cover;
margin: 10px;
}
</style>
<!-- 수정된 코드 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<link rel="stylesheet" href="trip(0718)/resources/rec_write4.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
</head>
<body>
<form method="post" action="addDiaryRec" autocomplete="off" enctype="multipart/form-data">
<input type="hidden" id="dia_nick" name="dia_nick" value="${sessionScope.sessionNick}">
<div class="recode">
<!-- <div class="section_container">
<div class="sec1">
<div class="recwrite_top">
<div style="text-align: left; width: 55%;">
<p class="recwrite_tit">여행제목</p>
<input id="dia_sub" type="text" class="diatop1" name="dia_sub" placeholder="여행 제목을 적어주세요" value="강릉여행"><br>
<p class="recwrite_tit">한줄평</p>
<input id="dia_summ" type="text" class="diatop2" name="dia_summ" placeholder="여행에 대한 한줄평을 적어주세요" value="친구와 함께한 여행">
</div>
<div class="mfile">
<div style="display: flex; justify-content: space-between; margin-left: 5px;">
<label for="mfile" style="">썸네일 사진</label>
<input type="file" id="mfile" name="mfile" style="width: 200px;">
</div>
<div class="col-sm-10">
<img src="${rPath}/images/noimage.jpg" id="imgx" style="width: 100%; height: 214px; border: 1px solid gray; border-radius: 2ex; margin: 5px;">
</div>
</div>
</div>
<div> -->
<!-- 다이어리 해시태그 DIA_HASHTAG -->
<!-- <div>
<ul style="list-style: none; display: flex; justify-content: space-around;">
<li>
<label for="rec_hash_tag1" class="rec_hash_tag_tit">해시태그1</label>
<input id="rec_hash_tag1" class="rec_hash_tag_titWrite" name="rec_hash_tag" type="text" placeholder="'#'없이 해시태그 입력" value="해시태그1">
</li>
<li>
<label for="rec_hash_tag2" class="rec_hash_tag_tit">해시태그2</label>
<input id="rec_hash_tag2" class="rec_hash_tag_titWrite" name="rec_hash_tag" type="text" placeholder="'#'없이 해시태그 입력" value="해시태그2">
</li>
<li>
<label for="rec_hash_tag3" class="rec_hash_tag_tit">해시태그3</label>
<input id="rec_hash_tag3" class="rec_hash_tag_titWrite" name="rec_hash_tag" type="text" placeholder="'#'없이 해시태그 입력" value="해시태그3">
</li>
<li>
<label for="rec_hash_tag4" class="rec_hash_tag_tit">해시태그4</label>
<input id="rec_hash_tag4" class="rec_hash_tag_titWrite" name="rec_hash_tag" type="text" placeholder="'#'없이 해시태그 입력" value="해시태그4">
</li>
</ul>
</div>
</div>
</div>
</div>
-->
<!-- 캘린더 영역 -->
<!--<div style="text-align: center;">
<p style="display: inline-block;">일정 :</p>
<div class="calender" style="display: inline-block;">
<input type="hidden" name="startDate" id="startDateInput">
<input type="hidden" name="endDate" id="endDateInput">
</div>
</div>
-->
<!-- 일차 전체 영역 -->
<div class="section_container">
<!-- 1일차 영역 시작 -->
<div class="recwrite_nday">
<div class="sec1" style="text-align: left;">
<h2><input class="inputnoboard" id="rec_sc_nday" style="width: 20px; " name="rec_sc_nday" value="1" readonly="readonly">일차</h2>
</div>
<!-- 사진 -->
<div id="preview-container">
<h3 class="pics"><span>사진</span></h3>
<input type="file" id="image-input" multiple>
</div>
<!-- 일정 -->
<div class="rec-sec" style="background-">
<h3 class="tit"><span>일정 1</span> </h3>
<div class="rec_scTopDiv">
<input id="rec_sc_loca" type="text" class="rec_sc_tit" name="rec_sc_loca" placeholder="일정명을 적어주세요" value="경포대">
<input type="time" name="rec_sc_time" value="09:00" style="width: 150px;">
<input type="text" class="rec_sc_addr" name="rec_sc_addr" id="keyword" size="15" placeholder="주소를 적어주세요" value="강원 강릉시 경포로 365">
<input type="button" value="주소검색" style="width: 94px;">
</div>
<select id="rec_sc_type" name="rec_sc_type" class="rec_sc_select">
<option>경비종류선택</option>
<option value="교통비">교통비</option>
<option value="숙박비">숙박비</option>
<option value="식비">식비</option>
<option value="관광비">관광비</option>
<option value="기타">기타</option>
</select>
<input id="rec_sc_cost" type="text" name="rec_sc_cost" placeholder="경비금액 입력해주세요" value="10000">
<br>
<textarea style='width: 100%; height: 100px; margin-top: 10px;' name='rec_sc_memo' id='rec_sc_memo' placeholder='일정에 대한 Tip!'></textarea>
</div>
<div id="addSection"></div> <!-- 새로운 일정 추가되는 위치 -->
<div class="add-btn"> <!-- 새로운 일정 추가하는 버튼 -->
<input id="scAddBtn" type="button" value="+일정" style="margin: 20px 20px 20px 0;">
</div>
</div> <!-- 1일차 영역 끝 -->
<div class="section_container" id="addDate"></div> <!-- 새로운 일차 추가되는 위치 -->
<div class="add-btn"> <!-- 새로운 일차 추가하는 버튼 -->
<input id="addDateBtn" type="button" value="+일차" style="margin: 20px 20px 20px 0;">
</div>
</div> <!-- 일차 영역 끝-->
<div class="sumi-btn">
<button type="submit">등록</button>
<button type="button">취소</button>
</div>
</div> <!-- recode 끝 -->
</form>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
// Image upload and preview function
function handleImageUpload(event) {
const files = event.target.files;
const previewContainer = document.getElementById("preview-container");
// Clear existing preview images
while (previewContainer.firstChild) {
previewContainer.removeChild(previewContainer.firstChild);
}
// Generate preview for each selected image
for (let i = 0; i < files.length; i++) {
const file = files[i];
const reader = new FileReader();
reader.onload = function (event) {
const imageUrl = event.target.result;
const previewImage = document.createElement("img");
previewImage.setAttribute("src", imageUrl);
previewImage.setAttribute("class", "preview-image");
previewContainer.appendChild(previewImage);
};
reader.readAsDataURL(file);
}
}
const imageInput = document.getElementById("image-input");
imageInput.addEventListener("change", handleImageUpload);
</script>
<script>
// 이미지 미리보기 함수 => javascript I/O기능을 활용
function readURL(input) {
// input type = "file"의 주소를 가져온다.
if(input.files && input.files[0]){
// 자바스크립트 I/O
var reader = new FileReader();
// 리스너
reader.onload = function(e) {
//console.log("이벤트 발생: "+e.target.result); [이미지 제대로 나온거 보고 주석처리함]
// <img src> 선택자, attr("속성명", "값") => <img src="">
$('#imgx').attr('src', e.target.result); // 이미지를 바이너리로 전달
}
reader.readAsDataURL(input.files[0]);
}
}
// jQuery 문법 - 축약형 [이 문법형식을 많이 사용함!!!]
$(function () {
// JQuery 선택자
// 대상선택자에서 변화를 감지하는 이벤트 : change()
// #mfile : 파일업로드 속성을 선택자
// $('선택자')
$('#mfile').change(function() {
// .val() : input type의 value 속성의 값
//console.log($(this).val()); [해당 이미지명이 제대로 출력된거 보고 주석처리함]
if($(this).val().length>0){
readURL(this);
}else{
console.log("이미지없음");
}
})
})
</script>
<script>
// 여행날짜 계산함수
$(function() {
var datefilterInput = document.createElement("input");
datefilterInput.type = "text";
datefilterInput.name = "datefilter";
datefilterInput.value = "";
$(datefilterInput).addClass("centered-input");
$('.calender').append(datefilterInput);
$(datefilterInput).daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$(datefilterInput).on('apply.daterangepicker', function(ev, picker) {
$('#startDateInput').val(picker.startDate.format('YYYY/MM/DD'));
$('#endDateInput').val(picker.endDate.format('YYYY/MM/DD'));
$(this).val(picker.startDate.format('YYYY/MM/DD') + ' ~ ' + picker.endDate.format('YYYY/MM/DD'));
});
$(datefilterInput).on('cancel.daterangepicker', function(ev, picker) {
$('#startDateInput').val('');
$('#endDateInput').val('');
$(this).val('');
});
});
</script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
</body>
</html>
답변을 작성하려면 로그인이 필요합니다.
로그인