mindol1004/Blog_Project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Spring][쇼핑몰 프로젝트][25] 업로드 이미지 출력 -2

Browse Source 
https://kimvampa.tistory.com/224
This commit is contained in:
SeoJin Kim
2021-05-25 22:22:48 +09:00
parent 145039658f
commit ab1bbf53a6
2 changed files with 91 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
VamPa/src/main/webapp/WEB-INF/views/admin/goodsEnroll.jsp
View File

@@ -14,7 +14,36 @@
<script src="https://cdn.ckeditor.com/ckeditor5/26.0.0/classic/ckeditor.js"></script>
<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>
<style type="text/css">
#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;
}
</style>
</head>
<body>
@@ -142,6 +171,14 @@
</div>
<div class="form_section_content">
<input type="file" id ="fileItem" name='uploadFile' style="height: 30px;">
<div id="uploadResult">
<!--
<div id="result_card">
<div class="imgDeleteBtn">x</div>
<img src="/display?fileName=test.png">
</div>
-->
</div>
</div>
</div>
@@ -504,6 +541,7 @@ $("#enrollBtn").on("click",function(e){
dataType : 'json',
success : function(result){
console.log(result);
showUploadImage(result);
},
error : function(result){
alert("이미지 파일이 아닙니다.");
@@ -534,6 +572,32 @@ $("#enrollBtn").on("click",function(e){
}
/* 이미지 출력 */
function showUploadImage(uploadResultArr){
/* 전달받은 데이터 검증 */
if(!uploadResultArr || uploadResultArr.length == 0){return}
let uploadResult = $("#uploadResult");
let obj = uploadResultArr[0];
let str = "";
let fileCallPath = encodeURIComponent(obj.uploadPath.replace(/\\/g, '/') + "/s_" + obj.uuid + "_" + obj.fileName);
//replace 적용 하지 않아도 가능
//let fileCallPath = encodeURIComponent(obj.uploadPath + "/s_" + obj.uuid + "_" + obj.fileName);
str += "<div id='result_card'>";
str += "<img src='/display?fileName=" + fileCallPath +"'>";
str += "<div class='imgDeleteBtn'>x</div>";
str += "</div>";
uploadResult.append(str);
}
</script>
</body>

26
VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/goodsEnroll.jsp
View File

@@ -485,6 +485,7 @@ $("#enrollBtn").on("click",function(e){
dataType : 'json',
success : function(result){
console.log(result);
showUploadImage(result);
},
error : function(result){
alert("이미지 파일이 아닙니다.");
@@ -514,6 +515,31 @@ $("#enrollBtn").on("click",function(e){
}
/* 이미지 출력 */
function showUploadImage(uploadResultArr){
/* 전달받은 데이터 검증 */
if(!uploadResultArr || uploadResultArr.length == 0){return}
let uploadResult = $("#uploadResult");
let obj = uploadResultArr[0];
let str = "";
let fileCallPath = encodeURIComponent(obj.uploadPath.replace(/\\/g, '/') + "/s_" + obj.uuid + "_" + obj.fileName);
//replace 적용 하지 않아도 가능
//let fileCallPath = encodeURIComponent(obj.uploadPath + "/s_" + obj.uuid + "_" + obj.fileName);
str += "<div id='result_card'>";
str += "<img src='/display?fileName=" + fileCallPath +"'>";
str += "<div class='imgDeleteBtn'>x</div>";
str += "</div>";
uploadResult.append(str);
}
</script>
</body>