[Spring][쇼핑몰 프로젝트][29] 상품 이미지 수정 - 2(삭제, 재등록)
https://kimvampa.tistory.com/236
This commit is contained in:
SeoJin Kim
@@ -142,7 +142,7 @@
|
||||
</div>
|
||||
<div class="form_section_content">
|
||||
<input type="file" id ="fileItem" name='uploadFile' style="height: 30px;">
|
||||
<div id="uploadReslut">
|
||||
<div id="uploadResult">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -322,7 +322,7 @@
|
||||
|
||||
/* 기존 이미지 출력 */
|
||||
let bookId = '<c:out value="${goodsInfo.bookId}"/>';
|
||||
let uploadReslut = $("#uploadReslut");
|
||||
let uploadResult = $("#uploadResult");
|
||||
|
||||
$.getJSON("/getAttachList", {bookId : bookId}, function(arr){
|
||||
|
||||
@@ -336,7 +336,7 @@
|
||||
str += "<img src='/resources/img/goodsNoImage.png'>";
|
||||
str += "</div>";
|
||||
|
||||
uploadReslut.html(str);
|
||||
uploadResult.html(str);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -354,7 +354,7 @@
|
||||
str += "<input type='hidden' name='imageList[0].uploadPath' value='"+ obj.uploadPath +"'>";
|
||||
str += "</div>";
|
||||
|
||||
uploadReslut.html(str);
|
||||
uploadResult.html(str);
|
||||
|
||||
});// GetJSON
|
||||
|
||||
@@ -611,6 +611,108 @@
|
||||
|
||||
});
|
||||
|
||||
/* 이미지 삭제 버튼 동작 */
|
||||
$("#uploadResult").on("click", ".imgDeleteBtn", function(e){
|
||||
|
||||
deleteFile();
|
||||
|
||||
});
|
||||
|
||||
/* 파일 삭제 메서드 */
|
||||
function deleteFile(){
|
||||
|
||||
$("#result_card").remove();
|
||||
|
||||
}
|
||||
|
||||
/* 이미지 업로드 */
|
||||
$("input[type='file']").on("change", function(e){
|
||||
|
||||
/* 이미지 존재시 삭제 */
|
||||
if($(".imgDeleteBtn").length > 0){
|
||||
deleteFile();
|
||||
}
|
||||
|
||||
let formData = new FormData();
|
||||
let fileInput = $('input[name="uploadFile"]');
|
||||
let fileList = fileInput[0].files;
|
||||
let fileObj = fileList[0];
|
||||
|
||||
if(!fileCheck(fileObj.name, fileObj.size)){
|
||||
return false;
|
||||
}
|
||||
|
||||
formData.append("uploadFile", fileObj);
|
||||
|
||||
$.ajax({
|
||||
url: '/admin/uploadAjaxAction',
|
||||
processData : false,
|
||||
contentType : false,
|
||||
data : formData,
|
||||
type : 'POST',
|
||||
dataType : 'json',
|
||||
success : function(result){
|
||||
console.log(result);
|
||||
showUploadImage(result);
|
||||
},
|
||||
error : function(result){
|
||||
alert("이미지 파일이 아닙니다.");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
/* var, method related with attachFile */
|
||||
let regex = new RegExp("(.*?)\.(jpg|png)$");
|
||||
let maxSize = 1048576; //1MB
|
||||
|
||||
function fileCheck(fileName, fileSize){
|
||||
|
||||
if(fileSize >= maxSize){
|
||||
alert("파일 사이즈 초과");
|
||||
return false;
|
||||
}
|
||||
|
||||
if(!regex.test(fileName)){
|
||||
alert("해당 종류의 파일은 업로드할 수 없습니다.");
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
/* 이미지 출력 */
|
||||
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' 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>";
|
||||
|
||||
uploadResult.append(str);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -143,7 +143,7 @@
|
||||
</div>
|
||||
<div class="form_section_content">
|
||||
<input type="file" id ="fileItem" name='uploadFile' style="height: 30px;">
|
||||
<div id="uploadReslut">
|
||||
<div id="uploadResult">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -320,7 +320,7 @@
|
||||
|
||||
/* 기존 이미지 출력 */
|
||||
let bookId = '<c:out value="${goodsInfo.bookId}"/>';
|
||||
let uploadReslut = $("#uploadReslut");
|
||||
let uploadResult = $("#uploadResult");
|
||||
|
||||
$.getJSON("/getAttachList", {bookId : bookId}, function(arr){
|
||||
|
||||
@@ -334,7 +334,7 @@
|
||||
str += "<img src='/resources/img/goodsNoImage.png'>";
|
||||
str += "</div>";
|
||||
|
||||
uploadReslut.html(str);
|
||||
uploadResult.html(str);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -352,11 +352,10 @@
|
||||
str += "<input type='hidden' name='imageList[0].uploadPath' value='"+ obj.uploadPath +"'>";
|
||||
str += "</div>";
|
||||
|
||||
uploadReslut.html(str);
|
||||
uploadResult.html(str);
|
||||
|
||||
});// GetJSON
|
||||
|
||||
|
||||
}); // document ready
|
||||
|
||||
</script>
|
||||
@@ -610,6 +609,108 @@
|
||||
|
||||
});
|
||||
|
||||
/* 이미지 삭제 버튼 동작 */
|
||||
$("#uploadResult").on("click", ".imgDeleteBtn", function(e){
|
||||
|
||||
deleteFile();
|
||||
|
||||
});
|
||||
|
||||
/* 파일 삭제 메서드 */
|
||||
function deleteFile(){
|
||||
|
||||
$("#result_card").remove();
|
||||
|
||||
}
|
||||
|
||||
/* 이미지 업로드 */
|
||||
$("input[type='file']").on("change", function(e){
|
||||
|
||||
/* 이미지 존재시 삭제 */
|
||||
if($(".imgDeleteBtn").length > 0){
|
||||
deleteFile();
|
||||
}
|
||||
|
||||
let formData = new FormData();
|
||||
let fileInput = $('input[name="uploadFile"]');
|
||||
let fileList = fileInput[0].files;
|
||||
let fileObj = fileList[0];
|
||||
|
||||
if(!fileCheck(fileObj.name, fileObj.size)){
|
||||
return false;
|
||||
}
|
||||
|
||||
formData.append("uploadFile", fileObj);
|
||||
|
||||
$.ajax({
|
||||
url: '/admin/uploadAjaxAction',
|
||||
processData : false,
|
||||
contentType : false,
|
||||
data : formData,
|
||||
type : 'POST',
|
||||
dataType : 'json',
|
||||
success : function(result){
|
||||
console.log(result);
|
||||
showUploadImage(result);
|
||||
},
|
||||
error : function(result){
|
||||
alert("이미지 파일이 아닙니다.");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
/* var, method related with attachFile */
|
||||
let regex = new RegExp("(.*?)\.(jpg|png)$");
|
||||
let maxSize = 1048576; //1MB
|
||||
|
||||
function fileCheck(fileName, fileSize){
|
||||
|
||||
if(fileSize >= maxSize){
|
||||
alert("파일 사이즈 초과");
|
||||
return false;
|
||||
}
|
||||
|
||||
if(!regex.test(fileName)){
|
||||
alert("해당 종류의 파일은 업로드할 수 없습니다.");
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
/* 이미지 출력 */
|
||||
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' 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>";
|
||||
|
||||
uploadResult.append(str);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user