[Spring][쇼핑몰 프로젝트][24] 상품 이미지 업로드(파일 서버 전송) - 1

https://kimvampa.tistory.com/213
This commit is contained in:
SeoJin Kim
2021-04-28 18:46:49 +09:00
parent 807b5d72c4
commit 1e649c4f20
2 changed files with 106 additions and 0 deletions

View File

@@ -135,6 +135,16 @@
<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>
</div>
</form>
<div class="btn_section">
<button id="cancelBtn" class="btn">취 소</button>
@@ -452,7 +462,60 @@ $("#enrollBtn").on("click",function(e){
});
/* 이미지 업로드 */
$("input[name='bookPrice']").on("change", function(){
let userInput = $("#discount_interface");
let discountInput = $("input[name='bookDiscount']");
let discountRate = userInput.val(); // 사용자가 입력한 할인값
let sendDiscountRate = discountRate / 100; // 서버에 전송할 할인값
let goodsPrice = $("input[name='bookPrice']").val(); // 원가
let discountPrice = goodsPrice * (1 - sendDiscountRate); // 할인가격
if(!isNaN(discountRate)){
$(".span_discount").html(discountPrice);
}
});
/* 이미지 업로드 */
$("input[type='file']").on("change", function(e){
let fileInput = $('input[name="uploadFile"]');
let fileList = fileInput[0].files;
let fileObj = fileList[0];
if(!fileCheck(fileObj.name, fileObj.size)){
return false;
}
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;
}
</script>

View File

@@ -135,6 +135,14 @@
<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>
</div>
</form>
<div class="btn_section">
<button id="cancelBtn" class="btn">취 소</button>
@@ -436,6 +444,7 @@ $("#enrollBtn").on("click",function(e){
});
/* 이미지 업로드 */
$("input[name='bookPrice']").on("change", function(){
let userInput = $("#discount_interface");
@@ -452,7 +461,41 @@ $("#enrollBtn").on("click",function(e){
});
/* 이미지 업로드 */
$("input[type='file']").on("change", function(e){
let fileInput = $('input[name="uploadFile"]');
let fileList = fileInput[0].files;
let fileObj = fileList[0];
if(!fileCheck(fileObj.name, fileObj.size)){
return false;
}
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;
}
</script>