[Spring MVC] 게시판 boardForm.jsp #11

Last Updated: 2022년 12월 14일

DB에 글을 입력한다.

출처: 내 컴퓨터

boardForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/layout/header.jsp"%>

<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
<script type="text/javascript">
var g_count =1;
$(document).ready(function(e){

	CKEDITOR.replace( 'content' );
	CKEDITOR.config.height = 300;

	$(document).on('click', '#boardInsertBtn', function(e){
		e.preventDefault();
		$("#form").submit();
	});

	$(document).on('click', '#boardListBtn', function(e){
		e.preventDefault();
		location.href="${path}/board/boardList";
	});

	$("#addFile").on("click", function(e) { //파일 추가 버튼
		e.preventDefault();
		fn_fileAdd();
	});

	// 용량제한
	$("input[type='file']").on("change", function (e) {
		/*
		var ext = $(this).val().split(".").pop().toLowerCase();
		if($.inArray(ext,["gif","jpg","jpeg","png","bmp"]) == -1) {
			alert("gif, jpg, jpeg, png, bmp 파일만 업로드 해주세요.");
			$("input[type=file]").val("");
			return;
		}
		*/
		var fileSize = this.files[0].size;
		var maxSize = 1024 * 1024;
		if(fileSize > maxSize) {
			alert("파일용량을 초과하였습니다.");
			$(this).val('');
			return;
		}
		var file  = this.files[0];
		var _URL = window.URL || window.webkitURL;
		var img = new Image();

		img.src = _URL.createObjectURL(file);
		img.onload = function() {
			if(img.width != 720 || img.height != 270) {
				alert("이미지 가로 720px, 세로 270px로 맞춰서 올려주세요.");
				$("input[type=file]").val("");
			}
		}
	});

})

function fn_valiChk(){
	var regForm = $("form[name='form'] .chk").length;
	for(var i = 0; i<regForm; i++){
		if($(".chk").eq(i).val() == "" || $(".chk").eq(i).val() == null){
			alert($(".chk").eq(i).attr("title"));
			return true;
		}
	}
}
function fn_fileDelete(obj){
	obj.parent().remove();
}

function fn_fileAdd() {
	var htmls = "<p><input type='file' name='file_"+(g_count++)+"' id='file_"+(g_count++)+"'/><a href='#this' name='delete' class='btn'>삭제하기</a></p> ";
	/*
	var htmls = "";
	htmls += '<p><div class="input-group mb-3 w-50">';
	htmls += '<div class="input-group-prepend"><span class="input-group-text">Upload</span></div>';
	htmls += '<div class="custom-file">';
	htmls += '<input type="file" name="file_'+(g_count++)+'" class="custom-file-input" />';
	htmls += '<label class="custom-file-label">Choose file</label>';
	htmls += '<a href="#this" name="delete" class="btn">삭제하기</a>';
	htmls += '</div>';
	htmls += '</div></p>';
	*/

	$("#fileDiv").append(htmls);
	$("a[name='delete']").on("click",function(e){
		e.preventDefault();
		fn_fileDelete($(this));
	})
}
</script>

<div align="center" class="container">

<c:if test="${msg eq null}" >
<form:form name="form" id="form" modelAttribute="boardDTO" mehtod="post">

<table class="table">
	<tr>
		<th style="width:90px"><form:label path="name">작성자</form:label></th>
		<td><form:input path="name" class="form-control col-md-6" /></td>
	</tr>
	<tr>
		<th style="width:90px"><form:label path="title">제목</form:label></th>
		<td><form:input path="title" class="form-control" /><form:errors path="title" /></td>
	</tr>
	<tr>
		<th style="width:90px"><form:label path="content">내용</form:label></th>
		<td><form:textarea path="content" class="form-control" rows="5" id="content" /></td>
	</tr>
	<tr>
		<td colspan="2">
			<!--
			<div class="input-group mb-3 w-50">
				<div class="input-group-prepend"><span class="input-group-text">Upload</span></div>
				<div class="custom-file">
					<input type="file" name="file_0" class="custom-file-input">
					<label class="custom-file-label">Choose file</label>
				</div>
			</div>
			  -->
			<div class="custom-file"><input type="file" name="file_0" id="file_0"></div><p/>
			<div id="fileDiv"></div>
		</td>
	</tr>
</table>
</form:form>
</c:if>

<button type="button" class="btn btn-outline-primary btn-lg" id="boardInsertBtn">저장</button>
<button type="button" class="btn btn-outline-primary btn-lg" id="boardListBtn">목록</button>
<a href="#this" class="btn" id="addFile">파일 추가</a>

</div>

<%@ include file="/WEB-INF/views/layout/tail.jsp"%>