[Spring][쇼핑몰 프로젝트][29] 상품 이미지 수정 - 1(이미지 출력)
https://kimvampa.tistory.com/235
This commit is contained in:
SeoJin Kim
@@ -1,5 +1,7 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||||
pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
||||
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
@@ -15,7 +17,6 @@
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
|
||||
</head>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<%@include file="../includes/admin/header.jsp" %>
|
||||
@@ -135,6 +136,17 @@
|
||||
<span class="ck_warn bookContents_warn">책 목차를 입력해주세요.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_section">
|
||||
<div class="form_section_title">
|
||||
<label>상품 이미지</label>
|
||||
</div>
|
||||
<div class="form_section_content">
|
||||
<input type="file" id ="fileItem" name='uploadFile' style="height: 30px;">
|
||||
<div id="uploadReslut">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name='bookId' value="${goodsInfo.bookId}">
|
||||
</form>
|
||||
<div class="btn_section">
|
||||
@@ -308,6 +320,44 @@
|
||||
$("#discount_interface").val(discountRate);
|
||||
|
||||
|
||||
/* 기존 이미지 출력 */
|
||||
let bookId = '<c:out value="${goodsInfo.bookId}"/>';
|
||||
let uploadReslut = $("#uploadReslut");
|
||||
|
||||
$.getJSON("/getAttachList", {bookId : bookId}, function(arr){
|
||||
|
||||
console.log(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 class='imgDeleteBtn' data-file='" + fileCallPath + "'>x</div>";
|
||||
str += "<input type='hidden' name='imageList[0].fileName' value='"+ obj.fileName +"'>";
|
||||
str += "<input type='hidden' name='imageList[0].uuid' value='"+ obj.uuid +"'>";
|
||||
str += "<input type='hidden' name='imageList[0].uploadPath' value='"+ obj.uploadPath +"'>";
|
||||
str += "</div>";
|
||||
|
||||
uploadReslut.html(str);
|
||||
|
||||
});// GetJSON
|
||||
|
||||
}); // document ready
|
||||
|
||||
</script>
|
||||
|
||||
@@ -167,6 +167,36 @@ input[name='publeYear'] {
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
/* 상품 이미지 */
|
||||
#result_card img{
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
margin-top: 10px;
|
||||
margin: auto;
|
||||
}
|
||||
#result_card {
|
||||
position: relative;
|
||||
}
|
||||
.imgDeleteBtn{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5%;
|
||||
background-color: #ef7d7d;
|
||||
color: wheat;
|
||||
font-weight: 900;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* 버튼 영역 */
|
||||
.btn_section{
|
||||
text-align: center;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
#Generated by Maven Integration for Eclipse
|
||||
#Sun Jul 04 23:43:48 KST 2021
|
||||
#Tue Jul 13 15:56:55 KST 2021
|
||||
m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa
|
||||
m2e.projectName=VamPa
|
||||
groupId=com.vam
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||||
pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
||||
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
@@ -15,7 +17,7 @@
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<%@include file="../includes/admin/header.jsp" %>
|
||||
@@ -135,6 +137,17 @@
|
||||
<span class="ck_warn bookContents_warn">책 목차를 입력해주세요.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_section">
|
||||
<div class="form_section_title">
|
||||
<label>상품 이미지</label>
|
||||
</div>
|
||||
<div class="form_section_content">
|
||||
<input type="file" id ="fileItem" name='uploadFile' style="height: 30px;">
|
||||
<div id="uploadReslut">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name='bookId' value="${goodsInfo.bookId}">
|
||||
</form>
|
||||
<div class="btn_section">
|
||||
@@ -305,6 +318,44 @@
|
||||
$(".span_discount").html(discountPrice);
|
||||
$("#discount_interface").val(discountRate);
|
||||
|
||||
/* 기존 이미지 출력 */
|
||||
let bookId = '<c:out value="${goodsInfo.bookId}"/>';
|
||||
let uploadReslut = $("#uploadReslut");
|
||||
|
||||
$.getJSON("/getAttachList", {bookId : bookId}, function(arr){
|
||||
|
||||
console.log(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 class='imgDeleteBtn' data-file='" + fileCallPath + "'>x</div>";
|
||||
str += "<input type='hidden' name='imageList[0].fileName' value='"+ obj.fileName +"'>";
|
||||
str += "<input type='hidden' name='imageList[0].uuid' value='"+ obj.uuid +"'>";
|
||||
str += "<input type='hidden' name='imageList[0].uploadPath' value='"+ obj.uploadPath +"'>";
|
||||
str += "</div>";
|
||||
|
||||
uploadReslut.html(str);
|
||||
|
||||
});// GetJSON
|
||||
|
||||
|
||||
}); // document ready
|
||||
|
||||
|
||||
@@ -167,6 +167,35 @@ input[name='publeYear'] {
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
/* 상품 이미지 */
|
||||
#result_card img{
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
margin-top: 10px;
|
||||
margin: auto;
|
||||
}
|
||||
#result_card {
|
||||
position: relative;
|
||||
}
|
||||
.imgDeleteBtn{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5%;
|
||||
background-color: #ef7d7d;
|
||||
color: wheat;
|
||||
font-weight: 900;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 버튼 영역 */
|
||||
.btn_section{
|
||||
text-align: center;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
#Generated by Maven Integration for Eclipse
|
||||
#Sun Jul 04 23:43:44 KST 2021
|
||||
#Tue Jul 13 15:56:56 KST 2021
|
||||
m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa_MySQL
|
||||
m2e.projectName=VamPa_MySQL
|
||||
groupId=com.vam
|
||||
|
||||
Reference in New Issue
Block a user