JSP & Servlet
DAY 56 - 이미지 등록 AJax 이용하기 / 이미지 전체선택 전체해제 / 이미지 선택삭제 ( 2024.09.24 )
summ.n
2024. 9. 24. 14:27
Folder: imageboard
File: imageboardWriteAJaxForm.jsp
imageboardMenu.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="nav">
<h3>
<p>
<a href="${ pageContext.request.contextPath }/imageboard/imageboardWriteForm.do">
이미지 등록</a></p>
<a href="${ pageContext.request.contextPath }/imageboard/imageboardWriteAJaxForm.do">
이미지 등록 AJax</a></p>
<p><a href="${ pageContext.request.contextPath }/imageboard/imageboardList.do?pg=1">이미지 목록</a></p>
</h3>
</div>command.properties
/imageboard/imageboardWriteAJaxForm.do=imageboard.service.ImageboardWriteAJaxFormServiceImageboardWriteAJaxFormService.java
package imageboard.service;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.control.CommandProcess;
public class ImageboardWriteAJaxFormService implements CommandProcess {
@Override
public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
return "/imageboard/imageboardWriteAJaxForm.jsp";
}
}imageboardWriteAJaxForm.jsp
imageboardWriteForm.jsp 그대로 복붙하는데
form 태그는 id만 두고 다 지우기 !
이미지등록을 submit에서 button으로 바꾸고 아이디 걸기 !
<div id="container">
<jsp:include page="../main/imageboardMenu.jsp" />
<div id="section">
<form id="imageboardWriteForm">
<table border="1">
<tr>
<th>상품코드</th>
<td>
<input type="text" name="imageId" id="imageId" size="65"/>
<div class="red" id="imageIdDiv"></div>
</td>
</tr>
<tr>
<th>상품명</th>
<td>
<input type="text" name="imageName" id="imageName" size="65"/>
<div class="red" id="imageNameDiv"></div>
</td>
</tr>
<tr>
<th>단가</th>
<td>
<input type="text" name="imagePrice" id="imagePrice" size="65"/>
<div class="red" id="imagePriceDiv"></div>
</td>
</tr>
<tr>
<th>개수</th>
<td>
<input type="text" name="imageQty" id="imageQty" size="65"/>
<div class="red" id="imageQtyDiv"></div>
</td>
</tr>
<tr>
<th>내용</th>
<td>
<textarea name="imageContent" id="imageContent" cols="65" rows="15"></textarea>
<div class="red" id="iamgeContentDiv"></div>
</td>
</tr>
<tr>
<td colspan="2">
<img id="showImg" width="70" height="70" /> 
<img src="../image/camera.png" alt="카메라" id="camera" width="50px" height="50px" />
<input type="file" id="image1" name="image1" style="visibility: hidden" />
<div id="image1Div"></div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="이미지 등록" id="imageboardWrtieBtn" />
<input type="reset" value="다시작성" />
</td>
</tr>
</table>
</form>
</div>
</div>
<form>
</form> ------ forms[0]
<form>
</form> ------ forms[1]
<form>
</form> ------ forms[2]
이렇게 여러개 들어와도 상관없다.
<form>
<form>
</form>
</form>
form 안에 form은 안 된다.
processData
- 기본값은 true
- 기본적으로 Query String으로 변환해서 보내진다('변수=값&변수=값')
- 파일 전송시에는 반드시 false로 해야 한다.(formData를 문자열로 변환하지 않는다)
contentType
- 기본적으로 "application/x-www-form-urlencoded; charset=UTF-8"
- 파일 전송시에는 'multipart/form-data'로 전송이 될 수 있도록 false로 설정한다
$('#imageboardWriteBtn').click(function(){
let formData = new FormData($('#imageboardWriteForm')[0]);
$.ajax({
type: 'post',
enctype: 'multipart/form-data',
processData: false,
contentType: false,
url: '/projectMVC/imageboard/imageboardWriteAJax.do',
data: formData,
success: function(){
alert('이미지 등록 완료');
location.href = "/projectMVC/imageboard/imageboardList.do?pg=1"
},
error: function(e){
console.log(e);
}
});
});
</script>command.properties
/imageboard/imageboardWrite.do=imageboard.service.ImageboardWriteAJaxServiceImageboardWriteAJaxService.java
ImageboardWriteService.java 복붙 -- return "none"만 바꾸기 !
package imageboard.service;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.control.CommandProcess;
import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;
import imageboard.bean.ImageboardDTO;
import imageboard.dao.ImageboardDAO;
public class ImageboardWriteAJaxService implements CommandProcess {
@Override
public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
//실제폴더
String realFolder = request.getServletContext().getRealPath("/storage");
System.out.println("realFolder = " + realFolder);
//업로드
/*
MultipartRequest multi = new MultipartRequest(
request,
realFolder,
5 * 1024 * 1024, //5MB
"UTF-8");
*/
MultipartRequest multi = new MultipartRequest(
request,
realFolder, //이미지가 저장되는 위치
5 * 1024 * 1024, //5MB
"UTF-8",
new DefaultFileRenamePolicy()); //똑같은 이름이 업로드되면 파일명을 변경해서 올린다.
//데이터
String imageId = multi.getParameter("imageId");
String imageName = multi.getParameter("imageName");
int imagePrice = Integer.parseInt(multi.getParameter("imagePrice"));
int imageQty = Integer.parseInt(multi.getParameter("imageQty"));
String imageContent = multi.getParameter("imageContent");
String image1 = multi.getOriginalFileName("image1");
String fileName = multi.getFilesystemName("image1"); //파일명만 DB에 저장
System.out.println(image1 + ", " + fileName);
ImageboardDTO imageboardDTO = new ImageboardDTO();
imageboardDTO.setImageId(imageId);
imageboardDTO.setImageName(imageName);
imageboardDTO.setImagePrice(imagePrice);
imageboardDTO.setImageQty(imageQty);
imageboardDTO.setImageContent(imageContent);
imageboardDTO.setImage1(image1); // 파일명만 DB에 저장된다.
System.out.println(imageId);
System.out.println(imageName);
System.out.println(imagePrice);
System.out.println(imageQty);
System.out.println(imageContent);
System.out.println(image1);
ImageboardDAO imageboardDAO = ImageboardDAO.getInstance();
imageboardDAO.imageboardWrite(imageboardDTO);
return "none";
}
} <thead>
<tr>
<th>
<input type="checkbox" >번호
</th>
<th>이미지</th>
<th>상품명</th>
<th>단가</th>
<th>개수</th>
<th>합계</th>
</tr>
</thead> <tbody>
<c:if test="${list != null}">
<c:forEach var="imageboardDTO" items="${list}">
<tr>
<td><input type="checkbox" >${imageboardDTO.getSeq()}</td>
<td>
<a href="#">
<!-- src="가상폴더의 위치" -->
<img src="/projectMVC/storage/${imageboardDTO.getImage1()}" alt="${imageboardDTO.getImageName()}" width="100" height="100" />
</a>
</td>
<div style="margin-top: 20px;">
<input type="button" value="선택삭제" style="margin-right: 600px;"/>
<div style="text-align: center; display: inline;">
${imageboardPagingHTML}
</div>
</div>
1. 전체선택 / 전체해제
하나라도 선택해제시 전체선택 풀리게하기
<th>
<input type="checkbox" id="allCheck">번호
</th> <td>
<input type="checkbox" class="checkItem">${imageboardDTO.getSeq()}</td>
<td><script type="text/javascript">
$('#allCheck').on('change', function() {
if (this.checked) {
$('.checkItem').prop('checked', true);
} else {
$('.checkItem').prop('checked', false);
}
});
$('.checkItem').on('change', function() {
if ($('.checkItem:checked').length === $('.checkItem').length) {
$('#allCheck').prop('checked', true);
} else {
$('#allCheck').prop('checked', false);
}
});
$('#deleteBtn').on('click', function() {
let selectedItems = [];
$('.checkItem:checked').each(function() {
selectedItems.push($(this).val());
});
$.ajax({
type: 'post',
url: '/projectMVC/imageboard/imageboardDelete.do',
data: { selectedItems: selectedItems },
traditional: true,
success: function(data) {
alert('선택 항목이 삭제되었습니다.');
},
error: function(e) {
console.log(e);
}
});
});
</script>
2. 선택삭제하기 --- 아직 하는중
강사님이 알려주신 팁:
seq를 넘겨서 밑에 코드방법으로 지우면된다 !!
delete from imageboard where seq in(2, 5, 6)