<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ include file="../include/header.jsp" %>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec" %>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">게시글 수정-삭제 화면</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">게시글 수정-삭제 화면</div>
<div class="panel-body">
<form action="/board/modify" method="post" role="form">
<div class="form-group">
<label>글 번호</label>
<input class="form-control" name="bno" value="${vo.bno}" readonly="readonly">
</div>
<div class="form-group">
<label>글 제목</label>
<input class="form-control" name="title" value="${vo.title}">
</div>
<div class="form-group">
<label>글 내용</label>
<textarea class="form-control" rows="3" name="content">${vo.content }</textarea>
</div>
<div class="form-group">
<label>작성자</label>
<input class="form-control" name="writer" value="${vo.writer }" readonly="readonly">
</div>
<sec:authentication property="principal" var="pinfo"/>
<sec:authorize access="isAuthenticated()"> <!-- 비회원 수정 버튼 누르지 못하게 -->
<c:if test="${pinfo.username eq vo.writer}"> <!-- 작성자와 로그인 계정이 같으면 -->
<button type="submit" data-oper="modify" class="btn btn-primary">글 수정</button>
<button type="submit" data-oper="remove" class="btn btn-warning">글 삭제</button>
</c:if>
</sec:authorize>
<button type="submit" data-oper="list" class="btn btn-danger">목록</button>
<input type="hidden" name="pageNum" value="${cri.pageNum }">
<input type="hidden" name="amount" value="${cri.amount }">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token }">
</form>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<!-- 첨부파일 -->
<div class = "row">
<div class = "col-lg-12">
<div class = "panel panel-default">
<div class = "panel-heading">파일 첨부</div>
<!-- /.panel-heading -->
<div class = "panel-body">
<div class = "panel-body">
<div class = "form-group uploadDiv">
<input type = "file" name = 'uploadFile' multiple>
</div>
<div class = 'uploadResult'>
<ul></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var formObj = $("form");
$("button").on('click', function(e){
e.preventDefault();
var operation = $(this).data("oper");
if(operation === 'remove'){
formObj.attr("action", "/board/remove");
}else if(operation === 'list'){
// 주소, 방식
//self.location = '/board/list';
formObj.attr("method", "get");
formObj.attr("action", "/board/list");
var pageNumTag = $("input[name='pageNum']").clone();
var amountTag = $("input[name='amount']").clone();
formObj.empty(); //해당 요소 내부 초기화
formObj.append(pageNumTag);
formObj.append(amountTag);
} else if (operation === 'modify') {
console.log("submit clicked");
formObj.attr("action", '/board/modify');
var str = "";
$(".uploadResult ul li").each(function(i,obj){
var jobj = $(obj);
console.dir(jobj);
str += "<input type='hidden' name='attachList["+i+"].fileName' value='"+jobj.data("filename")+"'>";
str += "<input type='hidden' name='attachList["+i+"].uuid' value='"+jobj.data("uuid")+"'>";
str += "<input type='hidden' name='attachList["+i+"].uploadPath' value='"+jobj.data("path")+"'>";
});
formObj.append(str);
}
formObj.submit(); //폼 전송
});
});
</script>
<script type="text/javascript"><!-- 파일 업로드 스크립트 -->
$(function(){
//input=file 변경시 fileInputChange() 함수 실행
$("input[type='file']").on('change', function(){
fileInputChange();
});
var regex = new RegExp("(.*?)\.(exe|sh|zip|alz)$"); //정규식
var maxSize = 5242880; //5MB
var cloneObj = $(".uploadDiv").clone();
function checkExtension(fileName,fileSize){
if(fileSize >= maxSize){
alert("파일 사이즈 초과");
return;
}
if(regex.test(fileName)){
alert("해당 종류의 파일은 업로드할 수 없습니다.");
return false;
}
return true;
}
function fileInputChange(){
$(".uploadResult ul").empty();
var formData = new FormData();
var inputFile = $("input[type='file']");
var files = inputFile[0].files;
for(var i=0; i<files.length; i++){
if(!checkExtension(files[i].name, files[i].size)){
return false;
}
formData.append('uploadFile', files[i]);
}
$.ajax({
type : 'post',
url : '/uploadAjaxAction',
data : formData,
contentType : false,
processData : false,
dataType : 'json',
success : function(result){
console.log(result);
$(".uploadDiv").html(cloneObj.html());
showUploadFile(result);
}
});
}
var uploadResult = $(".uploadResult ul");
function showUploadFile(uploadResultArr){
var str = '';
$(uploadResultArr).each(function(i, obj) {
var fileCallPath = encodeURIComponent(obj.uploadPath +
"/" + obj.uuid +
"_" + obj.fileName);
str += '<li data-path="'+obj.uploadPath+'" data-uuid="'+ obj.uuid +'" data-filename="' + obj.fileName + '">';
str += '<div>';
str += '<img src="/resources/img/attach.png" style="width:15px" />';
str += '<span>' + obj.fileName + '</span>';
str += '<button type="button" data-file="'+fileCallPath+'" data-type="file" class="btn btn-warning btn-circle"><i class="fa fa-times"></i></button><br>';
str += '</div>';
str += '</li>';
});
uploadResult.html(str);
}
//첨부 파일 삭제 클릭 이벤트
uploadResult.on('click','button',function(){
var targetFile = $(this).data('file');
var targetLi = $(this).closest("li");
$.ajax({
type : 'post',
url : '/deleteFile',
data : {fileName : targetFile},//fileName키 : targetFile값
dataType : 'text',
success : function(result){
//alert(result);
targetLi.remove();
}
});
});
});
</script>
<%@include file="../include/footer.jsp" %>
