기능 추가하고 싶은데 도와주세요.

기능 추가하고 싶은데 도와주세요.

QA

기능 추가하고 싶은데 도와주세요.

본문

3421165199_1689930706.3451.png

그림과 같이 <+일정> 버튼을 누르면 파란색 네모친 구역이 일정2, 일정3으로 추가되게 하고,

<+일차> 버튼을 누르면 주황색 네모친 구역이 2일차, 3일차로 추가되게 하고 싶습니다.

그리고 파일 선택해서 사진을 올리면 파일이 여러 개 보이게 하고 싶습니다.

지금 제가 사진 올리면 파일 여러 개가 보이는데 그 외 일정 추가 버튼, 일차 추가 버튼을 누르면 추가가 되지 않습니다. 도와주세요.


<%@ 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>

이 질문에 댓글 쓰기 :

답변 2

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT