edit.jsp 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
  2. <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
  3. <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
  4. <%@ page language="java" contentType="text/html; charset=UTF-8"
  5. pageEncoding="UTF-8"%>
  6. <jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
  7. <script>
  8. $( function(){
  9. $( "#sendForm" ).validate({
  10. rules: {
  11. title : {
  12. maxlength : 100
  13. },
  14. content: {
  15. maxlength : 4000
  16. },
  17. },
  18. messages : {
  19. title : {
  20. required : "제목을 입력해주세요."
  21. },
  22. content : {
  23. required : "내용을 입력해주세요."
  24. }
  25. },
  26. onkeyup: function( element, event ) {
  27. $( element ).valid();
  28. },
  29. onfocusout: function (element) {
  30. $( element ).val( $.trim( $( element ).val() ) );
  31. $( element ).valid();
  32. },
  33. submitHandler: function(form) {
  34. form.submit();
  35. }
  36. });
  37. // var groupIdx = "<c:out value='${groupIdx}'/>";
  38. // if (groupIdx != "1") {
  39. // alertBox({ txt : '공지사항 수정 권한이 없습니다.', callBack : function(){ location.href='./list' } });
  40. // }
  41. var button = '';
  42. var fileOrgName = '<c:out value="${item.fileOriginalName}" />';
  43. console.log("fileOrgName -- > " + fileOrgName);
  44. button = '<input type="file" style="display: none;" id="file" name="file" onchange="checkFile(this);">';
  45. if (fileOrgName == "") {
  46. button = '<input type="file" id="file" name="file" onchange="checkFile(this);">';
  47. button += '<button type="button" class="btn btn-danger" id="fileRemoveBtn" onclick="removeFile();">첨부파일 삭제</button>';
  48. } else {
  49. button += '<button type="button" class="btn btn-danger" id="fileRemoveBtn" onclick="removeFileNameTag();">첨부파일 삭제</button>';
  50. }
  51. $("#fileTd").append(button);
  52. })
  53. function checkFile(el){
  54. // files 로 해당 파일 정보 얻기.
  55. var file = el.files;
  56. // file[0].size 는 파일 용량 정보입니다.
  57. if(file[0].size > 1024 * 1024 * 10){
  58. // 용량 초과시 경고후 해당 파일의 용량도 보여줌
  59. alert('10MB 이하 파일만 등록할 수 있습니다.\n\n' + '현재파일 용량 : ' + (Math.round(file[0].size / 1024 / 1024 * 100) / 100) + 'MB');
  60. } else {
  61. // 체크를 통과했다면 종료.
  62. return;
  63. }
  64. // 체크에 걸리면 선택된 내용 취소 처리를 해야함.
  65. // 파일선택 폼의 내용은 스크립트로 컨트롤 할 수 없습니다.
  66. // 그래서 그냥 새로 폼을 새로 써주는 방식으로 초기화 합니다.
  67. // 이렇게 하면 간단 !?
  68. el.outerHTML = el.outerHTML;
  69. }
  70. function removeFileNameTag() {
  71. $("#fileName").css("display", "none");
  72. $("#file").remove();
  73. $("#fileTd").prepend('<input type="file" id="file" name="file" onchange="checkFile(this);">');
  74. $("input[name=fileOriginalName]").val("");
  75. document.getElementById("fileRemoveBtn").setAttribute("onClick", "removeFile()");
  76. }
  77. function removeFile() {
  78. $("#file").val("");
  79. }
  80. </script>
  81. </head>
  82. <body>
  83. <div class="wrapper">
  84. <jsp:include page="${data._INCLUDE}/sidebar.jsp"></jsp:include>
  85. <div class="main">
  86. <jsp:include page="${data._INCLUDE}/top.jsp"></jsp:include>
  87. <main class="content">
  88. <div class="container-fluid p-0">
  89. <div class="row">
  90. <div class="col-12 col-lg-6">
  91. <h1 class="h3 mb-3">공지사항</h1>
  92. </div>
  93. <div class="col-12 col-lg-6 text-right">
  94. <nav aria-label="breadcrumb">
  95. <ol class="breadcrumb">
  96. <li class="breadcrumb-item"><a href="javscript:;">Home</a></li>
  97. <li class="breadcrumb-item">공지사항 수정</li>
  98. </ol>
  99. </nav>
  100. </div>
  101. </div>
  102. <div class="row">
  103. <div class="col-12">
  104. <div class="card">
  105. <form id="sendForm" action="./edit/update" method="post" enctype="multipart/form-data">
  106. <input type="hidden" name="postSeq" value='<c:out value="${item.postSeq}"/>' >
  107. <input type="hidden" name="fileName" value='<c:out value="${item.fileName}"/>' >
  108. <input type="hidden" name="fileOriginalName" value='<c:out value="${item.fileOriginalName}"/>' >
  109. <div class="card-body">
  110. <table class="table mobile-table">
  111. <colgroup>
  112. <col style="width:20%">
  113. <col style="width:80%">
  114. </colgroup>
  115. <tr>
  116. <th><span class="fix">*</span>제목</th>
  117. <td>
  118. <input type="text" name="title" class="form-control" value='<c:out value="${item.title}"/>' placeholder="제목을 입력하세요" maxlength="80" required>
  119. </td>
  120. </tr>
  121. <tr>
  122. <th><span class="fix">*</span>내용</th>
  123. <td>
  124. <textarea class="form-control" rows="10" cols="" name="content" placeholder="내용을 입력하세요" maxlength="1000" required><c:out value="${item.content}" /></textarea>
  125. </td>
  126. </tr>
  127. <tr>
  128. <th>첨부파일</th>
  129. <td id="fileTd">
  130. <c:if test="${item.fileOriginalName eq ''}">
  131. </c:if>
  132. <c:if test="${item.fileOriginalName ne ''}">
  133. <span id="fileName"><c:out value="${item.fileOriginalName}" /></span>
  134. </c:if>
  135. <!-- <input type="file" style="display: none;" id="file" name="file" onchange="checkFile(this);"> -->
  136. </td>
  137. </tr>
  138. </table>
  139. <div class="row mt-3">
  140. <div class="col-12">
  141. <div class="text-right">
  142. <button type="button" class="btn btn-outline-primary w100" onclick="history.back();">취소</button>
  143. <button type="submit" class="btn btn-primary w100">수정</button>
  144. </div>
  145. </div>
  146. </div>
  147. </div>
  148. </form>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </main>
  154. <jsp:include page="${data._INCLUDE}/footer.jsp"></jsp:include>
  155. </div>
  156. </div>
  157. </body>
  158. </html>