[Spring][쇼핑몰 프로젝트][28] 상품 상세 페이지 이미지 출력 - 2

https://kimvampa.tistory.com/234
This commit is contained in:
SeoJin Kim
2021-07-05 03:24:22 +09:00
parent 3ba8743632
commit a9a49cd55d
4 changed files with 108 additions and 0 deletions

View File

@@ -13,6 +13,16 @@
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/26.0.0/classic/ckeditor.js"></script>
<style type="text/css">
#result_card img{
max-width: 100%;
height: auto;
display: block;
padding: 5px;
margin-top: 10px;
margin: auto;
}
</style>
</head>
<body>
<%@include file="../includes/admin/header.jsp" %>
@@ -135,6 +145,18 @@
<textarea name="bookContents" id="bookContents_textarea" disabled>${goodsInfo.bookContents}</textarea>
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>상품 이미지</label>
</div>
<div class="form_section_content">
<div id="uploadReslut">
</div>
</div>
</div>
<div class="btn_section">
<button id="cancelBtn" class="btn">상품 목록</button>
@@ -272,6 +294,38 @@
}
});
/* 이미지 정보 호출 */
let bookId = '<c:out value="${goodsInfo.bookId}"/>';
let uploadReslut = $("#uploadReslut");
$.getJSON("/getAttachList", {bookId : bookId}, function(arr){
if(arr.length === 0){
let str = "";
str += "<div id='result_card'>";
str += "<img src='/resources/img/goodsNoImage.png'>";
str += "</div>";
uploadReslut.html(str);
return;
}
let str = "";
let obj = arr[0];
let fileCallPath = encodeURIComponent(obj.uploadPath + "/s_" + obj.uuid + "_" + obj.fileName);
str += "<div id='result_card'";
str += "data-path='" + obj.uploadPath + "' data-uuid='" + obj.uuid + "' data-filename='" + obj.fileName + "'";
str += ">";
str += "<img src='/display?fileName=" + fileCallPath +"'>";
str += "</div>";
uploadReslut.html(str);
});
}); // $(document).ready

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

View File

@@ -13,6 +13,16 @@
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/26.0.0/classic/ckeditor.js"></script>
<style type="text/css">
#result_card img{
max-width: 100%;
height: auto;
display: block;
padding: 5px;
margin-top: 10px;
margin: auto;
}
</style>
</head>
<body>
<%@include file="../includes/admin/header.jsp" %>
@@ -135,6 +145,18 @@
<textarea name="bookContents" id="bookContents_textarea" disabled>${goodsInfo.bookContents}</textarea>
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>상품 이미지</label>
</div>
<div class="form_section_content">
<div id="uploadReslut">
</div>
</div>
</div>
<div class="btn_section">
<button id="cancelBtn" class="btn">상품 목록</button>
@@ -272,6 +294,38 @@
}
});
/* 이미지 정보 호출 */
let bookId = '<c:out value="${goodsInfo.bookId}"/>';
let uploadReslut = $("#uploadReslut");
$.getJSON("/getAttachList", {bookId : bookId}, function(arr){
if(arr.length === 0){
let str = "";
str += "<div id='result_card'>";
str += "<img src='/resources/img/goodsNoImage.png'>";
str += "</div>";
uploadReslut.html(str);
return;
}
let str = "";
let obj = arr[0];
let fileCallPath = encodeURIComponent(obj.uploadPath + "/s_" + obj.uuid + "_" + obj.fileName);
str += "<div id='result_card'";
str += "data-path='" + obj.uploadPath + "' data-uuid='" + obj.uuid + "' data-filename='" + obj.fileName + "'";
str += ">";
str += "<img src='/display?fileName=" + fileCallPath +"'>";
str += "</div>";
uploadReslut.html(str);
});
}); // $(document).ready

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB