DAY 56 - 이미지 등록 AJax 이용하기 / 이미지 전체선택 전체해제 / 이미지 선택삭제 ( 2024.09.24 )

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.ImageboardWriteAJaxFormService

---

ImageboardWriteAJaxFormService.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" />&emsp;
		         		<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.ImageboardWriteAJaxService

---

ImageboardWriteAJaxService.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)