쇼핑몰에서 상품을 상세보기하면 최소 10~20장 정도의 다양한 각도의 상품사진을 볼수있을것이다.
이처럼 한 상품에 여러개의 이미지가 필요하므로 다중 업로드기능을 구현하였다.
상품목록 테이블에 이미지컬럼을 넣어도 되지만, 테이블 컬럼수가 너무 많아지므로, 이미지 테이블을 따로 만들었다.
@RequestMapping(value = "/admin_product_insert.do", method = RequestMethod.GET)
public ModelAndView productInsertAdmin() throws Exception {
List<EzenatCategoryDTO> list = adminMapper.listCate();
System.out.println("카테고리 리스트사이즈: "+list.size());
return new ModelAndView("admin/admin_product_insert","listCate", JSONArray.fromObject(list));
}
@RequestMapping(value = "/admin_product_insert.do", method = RequestMethod.POST)
public String productInsertOkAdmin(HttpServletRequest req, @ModelAttribute EzenatProductDTO dto
, MultipartFile mf, BindingResult result) throws IOException {
String[] product_size = req.getParameterValues("product_size");
System.out.println(dto.getProduct_code());
System.out.println("마진값"+"="+dto.getProduct_margin());
System.out.println("디자인"+dto.getProduct_explain_design());
System.out.println("원단"+dto.getProduct_explain_fabric());
System.out.println("사이즈"+dto.getProduct_explain_size());
MultipartHttpServletRequest mr = (MultipartHttpServletRequest) req;
Iterator<String> it = (Iterator<String>) mr.getFileNames();
String upPath = req.getServletContext().getRealPath("/resources/product_images");
EzenatProductImageDTO imgDTO = new EzenatProductImageDTO();
dto.setProduct_size(product_size[0]);
String a = "test";
int b = 1;
dto.setProduct_code(dto.getCategory_code()+dto.getProduct_code());
System.out.println(dto.getProduct_code());
dto.setProduct_exchanged(b);
dto.setProduct_refunded(b);
int count = adminMapper.getProductCount(dto);
if(count >= 1) {
req.setAttribute("msg", "중복되는 상품이 존재합니다.");
req.setAttribute("url", "admin_product_insert.do");
return "/message";
}
int res = adminMapper.insertProduct(dto);
int product_num = adminMapper.getProductNum(dto);
if (res > 0) {
imgDTO.setProduct_num(product_num);
while (it.hasNext()) {
String img = it.next();
mf = mr.getFile(img);
String prod_image = mf.getOriginalFilename();
File file = new File(upPath, prod_image);
if (mf.getSize() != 0) {
if (!file.exists())
file.mkdirs();
try {
mf.transferTo(file);
} catch (IllegalStateException | IOException e) {
e.printStackTrace();
}
}
System.out.println(prod_image);
if (prod_image == null || prod_image.equals("")) {
break;
}
// 사진 순서대로 넣기
if (imgDTO.getProduct_image1() == null || imgDTO.getProduct_image1().equals("")) {
imgDTO.setProduct_image1(prod_image);
} else if (imgDTO.getProduct_image2() == null || imgDTO.getProduct_image2().equals("")) {
imgDTO.setProduct_image2(prod_image);
} else if (imgDTO.getProduct_image3() == null || imgDTO.getProduct_image3().equals("")) {
imgDTO.setProduct_image3(prod_image);
} else if (imgDTO.getProduct_image4() == null || imgDTO.getProduct_image4().equals("")) {
imgDTO.setProduct_image4(prod_image);
} else if (imgDTO.getProduct_image5() == null || imgDTO.getProduct_image5().equals("")) {
imgDTO.setProduct_image5(prod_image);
} else if (imgDTO.getProduct_image6() == null || imgDTO.getProduct_image6().equals("")) {
imgDTO.setProduct_image6(prod_image);
} else if (imgDTO.getProduct_image7() == null || imgDTO.getProduct_image7().equals("")) {
imgDTO.setProduct_image7(prod_image);
} else if (imgDTO.getProduct_image8() == null || imgDTO.getProduct_image8().equals("")) {
imgDTO.setProduct_image8(prod_image);
} else if (imgDTO.getProduct_image9() == null || imgDTO.getProduct_image9().equals("")) {
imgDTO.setProduct_image9(prod_image);
} else if (imgDTO.getProduct_image10() == null || imgDTO.getProduct_image10().equals("")) {
imgDTO.setProduct_image10(prod_image);
}
//이미지 없는거에 "" 값 정해주기
if (imgDTO.getProduct_image2() == null || imgDTO.getProduct_image2().equals("")) {
imgDTO.setProduct_image2("");
}
if (imgDTO.getProduct_image3() == null || imgDTO.getProduct_image3().equals("")) {
imgDTO.setProduct_image3("");
}
if (imgDTO.getProduct_image4() == null || imgDTO.getProduct_image4().equals("")) {
imgDTO.setProduct_image4("");
}
if (imgDTO.getProduct_image5() == null || imgDTO.getProduct_image5().equals("")) {
imgDTO.setProduct_image5("");
}
if (imgDTO.getProduct_image6() == null || imgDTO.getProduct_image6().equals("")) {
imgDTO.setProduct_image6("");
}
if (imgDTO.getProduct_image7() == null || imgDTO.getProduct_image7().equals("")) {
imgDTO.setProduct_image7("");
}
if (imgDTO.getProduct_image8() == null || imgDTO.getProduct_image8().equals("")) {
imgDTO.setProduct_image8("");
}
if (imgDTO.getProduct_image9() == null || imgDTO.getProduct_image9().equals("")) {
imgDTO.setProduct_image9("");
}
if (imgDTO.getProduct_image10() == null || imgDTO.getProduct_image10().equals("")) {
imgDTO.setProduct_image10("");
}
}
int res2 = adminMapper.insertProductImage(imgDTO);
req.setAttribute("msg", "상품등록 성공");
req.setAttribute("url", "admin_product_list.do");
} else {
req.setAttribute("msg", "상품 등록실패!");
req.setAttribute("url", "admin_product_insert.do");
}
return "message";
}상품 테이블에 값이 모두 입력되면, while 문을 통한 10개의 컬럼에 이미지 값이 들어올수있도록 하였다.
메인 이미지를 제외한 나머지 9개의 이미지는 없을경우도 있기때문에 if문을 통한 Null에대한 조건을 만들었다.
js 파일 부분.
attachFile = {
add : function(asd) { // 파일필드 추가
var idx = asd;
//alert("첫 시작 idx="+idx)
var div = document.createElement('div');
div.style.marginTop = '3px';
div.id = 'file' + (idx+1);
var check = document.getElementById('file'+idx).childElementCount;
if(idx == 0){
if(check == 2){
document.getElementById('img0').src = document.getElementById('file_img0').value;
return
}else{
var img = document.createElement('img');
//alert('이미지Element생성'+idx)
img.setAttribute("id",'img'+idx);
img.setAttribute("src", document.getElementById('file_img'+idx).value);
img.setAttribute("width", "50");
img.setAttribute("height", "50");
document.getElementById('file'+idx).appendChild(img);
//alert(document.getElementById('file_img'+idx).value) //이미지 주소
}
}
//alert("check값:"+check)
if(idx != 0){
if(check == 2){
var img = document.createElement('img');
//alert('이미지Element생성'+idx)
img.setAttribute("id",'img'+idx);
img.setAttribute("src", document.getElementById('file_img'+idx).value);
img.setAttribute("width", "50");
img.setAttribute("height", "50");
document.getElementById('file'+idx).appendChild(img);
//alert(document.getElementById('file_img'+idx).value) //이미지 주소
}else if(check == 3){
document.getElementById('img'+idx).src = document.getElementById('file_img'+idx).value;
return
}
}
var file = document.all ? document
.createElement('<input name="files">') : document
.createElement('input');
file.type = 'file';
file.name = 'file_img'+(idx+1);
file.size = '20';
file.id = 'file_img' + (idx+1);
file.onchange = function(){
attachFile.add((idx+1));
}
var btn = document.createElement('input');
btn.type = 'button';
btn.value = '삭제';
btn.onclick = function() {
var isDel = confirm('삭제 하시겠습니까?')
if(isDel && document.getElementById('file_img'+(idx+1)).value != ''){
attachFile.del((idx+1));
}
}
btn.style.marginLeft = '5px';
var imgCount = document.getElementById('file-list').childElementCount;
//alert("이미지 갯수:"+imgCount)
var fileCount = document.getElementById('attachFileDiv').childElementCount;
document.getElementById('attachFileDiv').appendChild(div);
//alert("attachFileDiv 자식 갯수 :"+ fileCount)
div.appendChild(file);
div.appendChild(btn);
if((fileCount+imgCount) == 10){
alert("파일은 총 10개만 등록 가능합니다.")
document.getElementById(file.id).disabled = true;
return
}
},
del : function(idx) { // 파일필드 삭제
// alert("del안에들어옴! idx="+idx)
var fileCount = document.getElementById('attachFileDiv').childElementCount;
if(fileCount == 10 && document.getElementById('file_img9').value != ''){
document.getElementById('attachFileDiv').removeChild(document.getElementById('file' + idx));
attachFile.delAdd(idx);
//alert("해치웠나?")
return
}
document.getElementById('attachFileDiv').removeChild(document.getElementById('file' + idx));
var imgCount = document.getElementById('file-list').childElementCount;
var fileCount = document.getElementById('attachFileDiv').childElementCount;
if((imgCount+fileCount) != 11){
document.getElementById('attachFileDiv').lastElementChild.firstElementChild.disabled = false;
return
}
},
delAdd : function(idx){
var div = document.createElement('div');
div.style.marginTop = '3px';
div.id = 'file' + idx;
var file = document.all ? document
.createElement('<input name="files">') : document
.createElement('input');
file.type = 'file';
file.name = 'file_img'+idx;
file.size = '20';
file.id = 'file_img' + idx;
file.onchange = function(){
attachFile.add(idx);
}
var btn = document.createElement('input');
btn.type = 'button';
btn.value = '삭제';
btn.onclick = function() {
var isDel = confirm('삭제 하시겠습니까?')
if(isDel && document.getElementById('file_img'+idx).value != ''){
attachFile.del(idx);
}
}
btn.style.marginLeft = '5px';
var fileCount = document.getElementById('attachFileDiv').childElementCount;
if(fileCount >= 10){
alert("파일은 총 10개만 등록 가능합니다.")
return
}
document.getElementById('attachFileDiv').appendChild(div);
//alert("attachFileDiv 자식 갯수 :"+ fileCount)
div.appendChild(file);
div.appendChild(btn);
}
}
$(document).ready(function() {
$("a[name='file-delete']").on("click", function(e) {
e.preventDefault();
deleteFile($(this));
});
var imgCount = document.getElementById('file-list').childElementCount;
var fileCount = document.getElementById('attachFileDiv').childElementCount;
var lastFile = document.getElementById('attachFileDiv').lastElementChild.id;
if((imgCount+fileCount) == 11){
//alert("disabled되야댐")
document.getElementById(lastFile).firstElementChild.disabled = true;
return
}else{
//alert("disabled안되야함 : "+document.getElementById('attachFileDiv').lastElementChild.id)
document.getElementById(lastFile).firstElementChild.disabled = false;
return
}
})
function deleteFile(obj) {
obj.parent().remove();
this.fileDisabled();
}
function fileDisabled(){
var imgCount = document.getElementById('file-list').childElementCount;
var fileCount = document.getElementById('attachFileDiv').childElementCount;
var lastFile = document.getElementById('attachFileDiv').lastElementChild.id;
if((imgCount+fileCount) == 11){
//alert("disabled되야댐")
document.getElementById(lastFile).firstElementChild.disabled = true;
return
}else{
//alert("disabled안되야함 : "+document.getElementById('attachFileDiv').lastElementChild.id)
document.getElementById(lastFile).firstElementChild.disabled = false;
return
}
}
//사이즈 설정
$(document).ready(function() {
$('button').click(function() {
var value = $("input[type=radio][name=contact]:checked").val();
if (value) {
alert(value);
}
else {
alert('Nothing is selected');
}
})
});
이미지 10개까지 올리게되면 알림창이 나타나게 된다.
jsp 부분.
<p style="border-right: none;">이미지 정보</p>
<div>
<img src="resources/product_images/${getProd.product_image1}">
</div>
<div>${getProd.product_image2}</div>
<div>${getProd.product_image3}</div>
<div>${getProd.product_image4}</div>
<div>${getProd.product_image5}</div>
<div>${getProd.product_image6}</div>
<div>${getProd.product_image7}</div>
<div>${getProd.product_image8}</div>
<div>${getProd.product_image9}</div>
<div>${getProd.product_image10}</div>
<div>
<div class="form-group file-group" id="file-list">
<c:set var="number" value="1" />
<c:forEach items="${imageList}" var="file">
<div class="file-input">
<c:if test="${file != null }">
<img src="${upPath}/${file}" width="50" height="50">
<br>
${file}
<c:if test="${dto.del eq 'N' }">
<a href='#this' name='file-delete'>삭제</a>
</c:if>
<input type="hidden" name="prod_image${number}" value="${file}">
</c:if>
</div>
<c:set var="number" value="${number+1}" />
</c:forEach>
</div>
<c:if test="${dto.del eq 'N' }">
<div id="attachFileDiv">
<div id="file0">
<input type="file" id="file_img0" name="file_img0" value="" size="20" onchange="javascript:attachFile.add(0)">
</div>
</div>
</c:if>
</div>
<div id="attachFileDiv">
<div id="file0">
<input type="file" id="file_img0" name="file_img0" value="" size="20" onchange="attachFile.add(0)">
</div>
</div>
<div id="image-preview" class="image-preview"></div>
</div>
'JAVA > 학원 프로젝트' 카테고리의 다른 글
| [JAVA/Spring] 국비 학원 최종프로젝트 #5 - 쇼핑몰 구현 - 회원관리 페이지 구현. (0) | 2023.10.05 |
|---|---|
| [JAVA/Spring] 국비 학원 최종프로젝트 #3 - 쇼핑몰 구현 - 어드민 관리자 페이지 (상품목록 부분,Ajax 활용) (0) | 2023.10.02 |
| [JAVA/Spring] 국비 학원 최종프로젝트 #2 - 쇼핑몰 구현 - 어드민 관리자 페이지 (카테고리 부분,JSON 활용) (0) | 2023.09.27 |
| [JAVA/Spring] 국비 학원 최종프로젝트 #1 - 쇼핑몰 구현 (0) | 2023.09.27 |
