choibk/web1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

우편번호 찾기 연동 및 프로필 이미지 미리보기

Browse Source
This commit is contained in:
choibk 2025-12-04 12:28:25 +09:00
parent 2530fc3b7c
commit 1e71fdde48
2 changed files with 79 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
js/member_input.js
View File

@ -122,4 +122,66 @@ document.addEventListener("DOMContentLoaded", () => {
})
// 우편번호 찾기
const btn_zipcode = document.querySelector("#btn_zipcode")
btn_zipcode.addEventListener("click", () => {
new daum.Postcode({
oncomplete: function (data) {
console.log(data)
let addr = ''
let extra_addr = ''
//기본 주소
if (data.userSelectedType === 'J') {
addr = data.jibunAddress
} else if (data.userSelectedType === 'R') {
addr = data.roadAddress
}
// 동/리 (법정동명)
if (data.bname !== '') {
extra_addr = data.bname
}
// 건물명
if (data.buildingName !== '') {
if (extra_addr === '') {
extra_addr = data.buildingName
} else {
extra_addr += ',' + data.buildingName
}
// 괄호 추가
if (extra_addr !== '') {
extra_addr = ' (' + extra_addr + ')'
}
}
// 주소 + 참고항목
const f_addr1 = document.querySelector("#f_addr1")
f_addr1.value = addr + extra_addr
// 우편번호 입력
const f_zipcode = document.querySelector("#f_zipcode")
f_zipcode.value = data.zonecode
const f_addr2 = document.querySelector("#f_addr2")
f_addr2.focus()
}
}).open();
})
const f_photo = document.querySelector("#f_photo")
f_photo.addEventListener("change", (e) => {
//console.log(e)
const reader = new FileReader()
reader.readAsDataURL(e.target.files[0])
reader.onload = function (event) {
// console.log(event)
// const img = document.createElement("img")
// img.setAttribute("src", event.target.result)
// document.querySelector("#f_preview").appendChild(img)
const f_preview = document.querySelector("#f_preview")
f_preview.setAttribute("src", event.target.result)
}
})
})

12
member_input.php
View File

@ -13,6 +13,10 @@ include 'header.php';
?>
<!-- 다음 카카오 우편번호 서비스 -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<main class="w-50 mx-auto border rounded-5 p-5">
<h1 class="text-center">회원가입</h1>
@ -50,9 +54,9 @@ include 'header.php';
<div class="d-flex gap-2 mt-3 align-items-end">
<div>
<label for="f_zipcode">우편번호</label>
<input type="text" name="zipcode" id="zipcode" class="form-control" maxlength="5" minlength="5">
<input type="text" name="zipcode" id="f_zipcode" class="form-control" maxlength="5" minlength="5">
</div>
<button type="button" class="btn btn-secondary">우편번호 찾기</button>
<button type="button" class="btn btn-secondary" id="btn_zipcode">우편번호 찾기</button>
</div>
<div class="d-flex mt-3 gap-2 justify-content-between">
@ -69,9 +73,9 @@ include 'header.php';
<div class="mt-3 d-flex gap-5">
<div>
<lable for="f_photo" class="form-label">프로필 이미지</lable>
<input type="file" name="profile" class="form-control">
<input type="file" name="photo" id="f_photo" class="form-control">
</div>
<img src="images/person.jpg" class="w-25" alt="profile image">
<img src="images/person.jpg" id="f_preview" class="w-25" alt="profile image">
</div>
<div class="mt-3 d-flex gap-2">