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