개발 기록용 블로그

$(function () {
            $(".regist").on("click", function () {
                const employNo = $("[name=employNo]").val();
                param = "?employNo=" + employNo;
                const url = "/employInsert" + param;
                fnWindowPopupOpen(url, "registerPopup", "600", "442");
            })
        })

popup 함수에 파라미터를 전달하는 간단한 예제

$(function () {
            $(".save").on("click", function () {
                if (!$("[name='department']").val()) {
                    alert("부서를 선택해주세요");
                    return false;
                } else if (!$("[name='name']").val()) {
                    alert("성함을 입력해주세요.");
                    return false;
                } else if (!$("[name='email']").val()) {
                    alert("이메일을 입력해주세요.");
                    return false;
                } else if (!$("[name='tel']").val()) {
                    alert("연락처를 입력해주세요.");
                    return false;
                }  else if (!$("input[name='gender']:checked").val()) {
                    alert("성별을 체크해주세요.");
                    return false;
                } else {
                    $("form").submit();
                }

            })
        })

간단한 유효성 검사 예제를 정리해보았다.

    <script>
        //이미지변경화면에서 추가/삭제 기능
        $(function () {
            let rt_image = document.getElementsByName("rt_image");
            let count = 0;
            let reader = new FileReader();
            //이미지 추가버튼을 눌렀을때 실행
            $(".img_add").on("click", function () {
                count++;
                if ($(".img_thum").length < 9) {
                    let fileTag = "";
                    fileTag += '<input id="fileTag'+count+'" type="file" style="display: none" name="fileTag" accept="image/*"/>';
                    $("#mainFrm").append(fileTag);
                    $("#fileTag"+count).trigger("click");
                    $("#fileTag"+count).on("change", function (e) {
                        let fileValue = $("#fileTag"+count).val();
                        let imageBoxTag = "";
                        //console.log(e.target.files);
                        reader.readAsDataURL(e.target.files[0]);
                        reader.onload = function (e)
                        {   imageBoxTag += '<a href="#" name="rt_image" class="img_thum">'
                            +'<span class="delete_img">삭제'+'</span>'
                            +'<img name= "imgname" src="'+ e.target.result +'" />'
                            +'</a>'
                            $(".img_thum_box").append(imageBoxTag);
                            $(".delete_img").on("click", deletefile());}
                        /*
                        on("click")이벤트 처리로 이벤트가 중복발생하는 문제.
                        click이벤트를 unbind로 제거하고 blind로 click이벤트를 발생시킴.*/
                        $(".save").unbind("click").bind("click", function () {
                            let formData = new FormData($('#mainFrm ')[0]);
                            $.ajax({
                                type: 'POST',
                                enctype: 'multipart/form-data',
                                url: '/ImageUpload',
                                data: formData,
                                processData: false,
                                contentType: false,
                                cache: false,
                                timeout: 600000,
                                success: function () {
                                    alert("이미지를 추가하였습니다");
                                    fnWindowPopupClose();
                                }, error: function () {
                                    alert("error");
                                }
                            });
                        });

                    })
                } else {
                    alert("사진을 더 이상 추가하실 수 없습니다");
                }
            });
            //TODO popup_이미지 삭제버튼을 눌렀을때 실행
            $(".delete_img").on("click", deletefile());
            function deletefile() {
                rt_image.forEach(function (rt_image) {
                    rt_image.addEventListener("click", function () {
                        let ckr = $(this).find('img').attr("src");
                        rt_image.remove();
                        $(".save").on("click", function () {
                            $.ajax({
                                url: 'deleteRtImg',
                                data: {"ckr": ckr},
                                type: 'post',
                                async: false,
                                success: function () {
                                    alert("이미지가 삭제되었습니다");
                                    fnWindowPopupClose();
                                }, error: function () {
                                    alert("error");
                                }
                            })
                        })
                    });
                })
            }
        })
    </script>

 <div class="" style="">
        <h1 class="">
            이미지 추가(수정)
            <a href="#" onclick="fnWindowPopupClose()" class="popup_close">닫기</a>
        </h1>
        <!-- content -->
        <div class="">
            <div class="">
                <div class="">
                    <div class=""></div>
                </div>
                <div class="">
                    <form id="mainFrm">
                    <th:block th:if="${rt_imagelist} != null" th:each="rilist : ${rt_imagelist}">
                        <a href="#" name="rt_image" class="img_thum">
                            <span class="delete_img">삭제</span>
                            <img class="show_img" th:src="@{${rilist.rt_imagepath}}"/>
                        </a>
                    </th:block>
                        <a href="#" class="img_thum img_add">
                            <span class="add_txt">입력창 추가</span>
                        </a>
                    </form>
                </div>
            </div>
        </div>
        <!-- Button -->
        <div class="">
            <a href="#" onclick="fnWindowPopupClose()" class="cancel"><span>취소</span></a>
            <a href="#" id="rt_image_save" name="rt_image_save" class="save">
                <span>저장</span>
            </a>
        </div>
    </div>

동적으로 이미지를 추가하고 삭제할 수있는 코드인데 참고 할 수있을 정도로만 수정하여 업로드한다.