영화/리뷰 프로젝트 적용하기-(2)
이미지 파일의 삭제와 submit 처리
- 이미지 파일의 삭제는 앞쪽에서 다뤄본 적이 있으므로 유사하게 처리하면 됩니다.
-달라지는 것은 <div>
가 아니라 <li>
라는 점입니다.
$(".uploadResult ").on("click", "li button", function(e){
console.log("delete file");
var targetFile = $(this).data("file");
var targetLi = $(this).closest("li");
$.ajax({
url: '/removeFile',
data: {fileName: targetFile},
dataType:'text',
type: 'POST',
success: function(result){
alert(result);
targetLi.remove();
}
}); //$.ajax
});
-
삭제가 잘 되었음을 알수 있습니다.
-화면에서 'Submit' 버튼을 클릭하면 다음과 같은 작업을 처리합니다.
-각 이미지<li>
태그의 'data-'속성들을 읽어 보냅니다.
-읽어 들인 속성값을 이용하여 <form>
xorm sodp <input type='hidden>
태그들을 생성합니다.
-<input type='hidden>
의 이름에는 'imageDTOList[0]'과 같이 인덱스 번호를 붙여서 처리합니다.
-
각 이미지 <input type='hidden>
태그를 구성하고 'imageDTOList[0]'과 같이 구성하면 나중에 MovieDTO 로 데이터를 수집할 때 자동으로 리스트로 변환되어서 처리할 수 있기 때문입니다.
$(".btn-primary").on("click",function(e){
e.preventDefault();//href 속성이 중단된다.
var str = "";
$(".uploadResult li").each(function(i,obj){
var target = $(obj);
str += "<input type='hidden' name='imageDTOList["+i+"].imgName' value='"+target.data('name') +"'>";
str += "<input type='hidden' name='imageDTOList["+i+"].path' value='"+target.data('path')+"'>";
str += "<input type='hidden' name='imageDTOList["+i+"].uuid' value='"+target.data('uuid')+"'>";
})
//태그들이 추가된 것을 확인한 후에 comment를 제거
$(".box").html(str);
//$(".form").submit();
});
- 마지막에 Submit()은 주석처리 되어 있으므로 실제 서버를 호출하지는 않지만, 아래 그림과 같이 'Submit'을 클릭하면 폼태그 안에있는
<div class='box'>
내에 hidden 타입의 태그들을 만들게 됩니다.
- submit()을 실행하면 아직 list 페이지가 없으므로 에러가 발생하지만 DB에는 정상적으로 추가된 것을 볼 수 있습니다.
Author And Source
이 문제에 관하여(영화/리뷰 프로젝트 적용하기-(2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@jyyoun1022/영화리뷰-프로젝트-적용하기-2
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
-달라지는 것은
<div>
가 아니라 <li>
라는 점입니다.$(".uploadResult ").on("click", "li button", function(e){
console.log("delete file");
var targetFile = $(this).data("file");
var targetLi = $(this).closest("li");
$.ajax({
url: '/removeFile',
data: {fileName: targetFile},
dataType:'text',
type: 'POST',
success: function(result){
alert(result);
targetLi.remove();
}
}); //$.ajax
});
삭제가 잘 되었음을 알수 있습니다.
-화면에서 'Submit' 버튼을 클릭하면 다음과 같은 작업을 처리합니다.
-각 이미지<li>
태그의 'data-'속성들을 읽어 보냅니다.
-읽어 들인 속성값을 이용하여 <form>
xorm sodp <input type='hidden>
태그들을 생성합니다.
-<input type='hidden>
의 이름에는 'imageDTOList[0]'과 같이 인덱스 번호를 붙여서 처리합니다.
각 이미지 <input type='hidden>
태그를 구성하고 'imageDTOList[0]'과 같이 구성하면 나중에 MovieDTO 로 데이터를 수집할 때 자동으로 리스트로 변환되어서 처리할 수 있기 때문입니다.
$(".btn-primary").on("click",function(e){
e.preventDefault();//href 속성이 중단된다.
var str = "";
$(".uploadResult li").each(function(i,obj){
var target = $(obj);
str += "<input type='hidden' name='imageDTOList["+i+"].imgName' value='"+target.data('name') +"'>";
str += "<input type='hidden' name='imageDTOList["+i+"].path' value='"+target.data('path')+"'>";
str += "<input type='hidden' name='imageDTOList["+i+"].uuid' value='"+target.data('uuid')+"'>";
})
//태그들이 추가된 것을 확인한 후에 comment를 제거
$(".box").html(str);
//$(".form").submit();
});
<div class='box'>
내에 hidden 타입의 태그들을 만들게 됩니다.Author And Source
이 문제에 관하여(영화/리뷰 프로젝트 적용하기-(2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jyyoun1022/영화리뷰-프로젝트-적용하기-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)