PT_WEB/src/main/webapp/WEB-INF/jsp/egovframework/admin/editPopupNew.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
        <!--contents-->
        <section class="sub-container">
            <article class="menu-history">
                <ul>
                    <li><a href="/admin/noticeList.do" class="home">홈</a></li>
                    <li><a href="/admin/editPopup.do">팝업관리</a></li>
                </ul>
            </article>
            <article class="contents-wrap">
                <div class="title-box">
                    <h2 class="h2-title">팝업관리</h2>
                    <p class="title-info">평택시 교통정보센터 <span>관리자</span></p>
                </div>
                <!--탭버튼-->
                <div class="tab-btn">
                    <p><a href="/admin/noticeList.do">공지사항</a></p>
                    <p><a href="/admin/popupList.do" class="active">팝업창 관리</a></p>
                    <p><a href="/admin/modiAdmin.do">관리자 정보변경</a></p>
                    <p><a href="/admin/status.do">접속통계</a></p>
                    <p><a href="/admin/logout.do">로그아웃</a></p>
                </div>
                <!--//탭버튼-->
                <form name="popForm" id="popForm" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="id" id="id" value="${popup.popupId }"/>
                        <div class='board-write-form'>
                            <dl>
                                <dt>제목</dt>
                                <dd><input
                                        type="text"
                                        id="title"
                                        name="title"
                                        class="form"
                                        style="width: 96%;"
                                        placeholder="제목을 입력하세요"
                                        value="${popup.title}"/></dd>
<%--                                <dd><input type="text" name="" placeholder="제목을 입력하세요." value="" style="width: 96%;" /></dd>--%>
                            </dl>
                            <dl>
                                <dt>링크(url)</dt>
                                <dd>
                                    <input
                                            type="text"
                                            id="url"
                                            name="url"
                                            class="form"
                                            style="width: 96%;"
                                            placeholder="http://는 생략"
                                            value="${popup.url}"/>
<%--                                    <input type="text" name="" value="" style="width: 96%;" />--%>
                                </dd>
                            </dl>
                            <dl>
                                <dt>기간</dt>
                                <dd>
                                    <input
                                            type="text"
                                            name="postFrom"
                                            id="postFrom"
                                            class="form"
                                            style="width:40%;"
                                            value="${popup.post_from}"/>
                                    ~
                                    <input
                                            type="text"
                                            name="postTo"
                                            id="postTo"
                                            class="form"
                                            style="width:40%;"
                                            value="${popup.post_to}"/>
<%--                                    <input type="text" name=""  value="" style="width:40%;"/> ~ <input type="text" name="" value="" style="width:40%;"/>--%>
                                </dd>
                            </dl>
                            <dl>
                                <dt>이미지</dt>
                                <dd style="display:flex; align-items: center;">
                                <div class="img-name" title="${popup.img_name}">${popup.img_name}</div>
                                <input type="text" id="img_name" name="img_name" style="display:none" value="${popup.img_name}"/>
                                <div class='file-btn' title="팝업이미지 파일 선택">파일 선택</div>
                                <input
                                        type="file"
                                        style='border:none;display:none;'
                                        name="popupImg"
                                        id="popupImg"
                                        title="팝업이미지 파일 선택"
                                        accept="image/*"
                                    />
                                </dd>
<%--                                <dd><input type="file" name="" placeholder="" value="" style='border:none' /></dd>--%>
                            </dl>
                        </div>
                </form>
                <div class='board-form-btn'>
                    <input id="popupUpdate" type="button" name="" class='send' value="팝업수정등록" onclick="" />
                </div>
            </article>
        </section>
<!--//contents-->
<script type="text/javascript">

	$('.file-btn').on('click', function(){
		$('#popupImg').click();
	})
	
	$('#popupImg').on('change', function(){
		$('.img-name').text(this.files[0].name);
		$('#img_name').val(this.files[0].name);
	})
    $("#postFrom").datepicker({
        dateFormat: 'yy-mm-dd',
        prevText: '이전 달',
        nextText: '다음 달',
        monthNames: [
            '1월',
            '2월',
            '3월',
            '4월',
            '5월',
            '6월',
            '7월',
            '8월',
            '9월',
            '10월',
            '11월',
            '12월'
        ],
        monthNamesShort: [
            '1월',
            '2월',
            '3월',
            '4월',
            '5월',
            '6월',
            '7월',
            '8월',
            '9월',
            '10월',
            '11월',
            '12월'
        ],
        dayNames: [
            '일',
            '월',
            '화',
            '수',
            '목',
            '금',
            '토'
        ],
        dayNamesShort: [
            '일',
            '월',
            '화',
            '수',
            '목',
            '금',
            '토'
        ],
        dayNamesMin: [
            '일',
            '월',
            '화',
            '수',
            '목',
            '금',
            '토'
        ],
        showMonthAfterYear: true,
        yearSuffix: '년'
    });

    $("#postTo").datepicker({
        dateFormat: 'yy-mm-dd',
        prevText: '이전 달',
        nextText: '다음 달',
        monthNames: [
            '1월',
            '2월',
            '3월',
            '4월',
            '5월',
            '6월',
            '7월',
            '8월',
            '9월',
            '10월',
            '11월',
            '12월'
        ],
        monthNamesShort: [
            '1월',
            '2월',
            '3월',
            '4월',
            '5월',
            '6월',
            '7월',
            '8월',
            '9월',
            '10월',
            '11월',
            '12월'
        ],
        dayNames: [
            '일',
            '월',
            '화',
            '수',
            '목',
            '금',
            '토'
        ],
        dayNamesShort: [
            '일',
            '월',
            '화',
            '수',
            '목',
            '금',
            '토'
        ],
        dayNamesMin: [
            '일',
            '월',
            '화',
            '수',
            '목',
            '금',
            '토'
        ],
        showMonthAfterYear: true,
        yearSuffix: '년'
    });

    $("#popupUpdate").click(function () {
    	const from = $("#postFrom");
    	const to   = $("#postTo");
    	const title = $("#title");
    	const image = $('#img_name');
    	const dateType = RegExp(/^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/);
    	if (title.val() == "") {
            alert("팝업제목은 필수 입니다.");
            title.focus();
            return false;
        }
        if (from.val() == "") {
            alert("팝업기간은 필수 입니다.");
            from.focus();
            return false;
        }
        if (to.val() == "") {
            alert("팝업기간은 필수 입니다.");
            to.focus()
            return false;
        }
        if (!dateType.test(from.val())) {
        	alert("날짜가 올바르지 않습니다.");
        	from.focus();
        	return false;
        }
        if (!dateType.test(to.val())) {
        	alert("날짜가 올바르지 않습니다.");
        	to.focus();
            return false;
        }
        if (from.val() > to.val()) {
            alert("시작일자가 종료일자보다 큽니다.");
        	to.focus();
            return false;
        }
        if (image.val() == "") {
            alert("팝업이미지는 필수 입니다.");
            return false;
        }
        if (image[0].files && image[0].files[0].size > 200000000) {
        	alert("팝업이미지 첨부 파일 사이즈는 190MB 이내로 등록 가능합니다.");
        	return false;
        }
        $("#popForm").attr("action", "/admin/updatePopup.do");
        $("#popForm").submit();
    });
</script>