- 완성본 git
GitHub - guguping/member_board: ICIA - DAY 54 ~ ING
ICIA - DAY 54 ~ ING. Contribute to guguping/member_board development by creating an account on GitHub.
github.com
다쓰기에는 너무 많기 때문에 완성본 git을 올림 페이징 , 검색 , 페이징 , 검색 , 페이징 ,검색 등
모르는 부분은 git을 참고
- 사진 프리뷰 - (다중) , 파일 이름 가져오기 - (다중)
boardSave.jsp
<tr>
<th colspan="6" style="border: 1px solid black">
<label for="boardFile" style="margin-left: 49px;">이미지</label>
<button type="button" style="float: right">
<label for="boardFile">등록</label>
</button>
</th>
</tr>
<tr>
<th>
<input type="file" accept="image/*" name="boardFile" multiple
style="display: none;" id="boardFile">
<div id="preview-image-container"></div>
<p id="fileName"></p>
</th>
</tr>전날 회원가입에 사용한 이미지파일 미리보기 와 다른점이 있다면
전날 회원가입에 사용된 file 타입의 input으로는 하나의 파일만 받았다면
이번에는 게시판에 사용되는 기능이기 때문에 여러장의 파일을 받는다는것 입니다
그렇기 떄문에 img태그가 하나만 있어도 되는 전날과는 다르게 여러개의 img태그가 필요하고
그로인해 div태그 하나에 image - container로 지정하고
여러개의 img태그를 만들어 뿌리는 식으로 만들게 되었습니다
파일이름은 그냥 p태그 안에 문자열을 이어 붙여 쭉 작성되게 만들었습니다
파일 이름 가져오기 (다중) - script
<script>
const upFile = document.getElementById('boardFile');
const fileName = document.getElementById('fileName');
파일의 이름을 가져오기 위해 이름을 넣어줄 p태그와
이름을 가져올 input 태그를 각 document객체로 변수에 담아줍니다
upFile.addEventListener('change',function (){
file타입의 input에 change 이벤트가 발생하면 해당 함수를 실행
for(let j = 0; j < this.files.length; j++)
fileName.innerHTML += "["+this.files[j].name+"] ";
전날에는 this.value로 경로까지 신경을 써야했다면 이번에는
직접적으로 파일의 이름만을 지정하기 때문에 replace를 사용하지 않고
파일의 이름만 가져오게 됩니다
})
이번에는 전날보다는 간단하게 사용되었습니다
하지만 파일이 여러장이기 때문에 for문을 사용하여
최대한 보기쉽게 p태그의 innerHTML에 문장을 +=로 붙여넣어 출력합니다
</script>
- 사진 미리보기 (다중) - script
<script>
function readImages(input) {
파일 선택 창에서 이미지 파일을 선택하면 readImge함수가 실행됩니다
매개변수가 input이기 때문에 input으로 선택한 파일의 정보가 전달됩니다
if (input.files && input.files.length > 0) {
const previewImageContainer = document.getElementById("preview-image-container");
여기까지는 전날과 마찬가지로 선택한 파일이 있는지 조건문을 통해 확인합니다
파일이 있다면 조건문이 실행됩니다
for (let i = 0; i < input.files.length; i++) {
여러개의 미리보기를 출력해야하기 떄문에 for문을 사용합니다
const reader = new FileReader();
또한 파일을 url로 변환하여 img태그에 넣어줄 생각이기 때문에
FileReader객체를 생성합니다
reader.onload = e => {
reader에 onload 이벤트를 사용하여 변환된 데이터를 읽고
파일의 내용을 img 태그의 src속성으로 변환합니다
const previewImage = document.createElement("img");
for문을 돌리며 img태그를 생성하고
previewImage.style.width = "100px";
previewImage.style.height = "100px";
사진의 크기가 모두 다르기 때문에 미리보기의 가로세로 사이즈를
100px로 고정합니다
previewImage.style.border = "1px solid black";
previewImage.src = e.target.result;
이렇게 만들어진 img태그의 src에 변환된 데이터를 넣어줍니다
previewImageContainer.appendChild(previewImage);
최종적으로 container로 지정한 div태그의 자식태그로
만들어진 img태그를 넣어주며 한번의 for문이 돌아가게 됩니다
}
reader.readAsDataURL(input.files[i]);
}
}
}
const memberFile = document.getElementById("boardFile");
memberFile.addEventListener("change", e => {
readImages(e.target);
이부분은 memberFile로 지정한 input태그에서 파일을 선택할 때
change 이벤트가 발생하면 readImages 함수가 실행되도록 설정하는
이벤트 리스너입니다
});
</script>
- 버튼 - 이벤트 실행 함수 변경하기
하나의 버튼에 onClick을 사용할때 두번째는 다른 스크립트가 사용되게 하기
MyPage.jsp
맨처음 MyPage 에서 처음에는 모든 정보가 disabled로 막혀있지만
정보수정을 누르면 disabled이 풀어주는 함수가 실행되고,
한번 더 정보 수정을 누르는 경우 submit을 위한 함수가 실행됩니다
이렇게 버튼 1개에 다른 함수를 적용하고 싶은 마음에 알아보게 되었습니다
MyPage - script
<body>
<input type="button" value="정보 수정" id="openUpdata" onclick="openUpdate()">
</body>
<script>
const email = document.getElementById('member-email');
const name = document.getElementById("member-name");
const password = document.getElementById("member-password");
const mobile = document.getElementById("member-mobile");
const openUpdata = document.getElementById('openUpdata');
const gosave = document.getElementById('gosave');
const openUpdate = () => {
name.disabled = false;
password.disabled = false;
mobile.disabled = false;
email.disabled = false;
모든 input에 걸려있는 disabled를 false로 바꾸며
잠금을 해제합니다
openUpdata.setAttribute("onclick", "changed()");
이후 buttondml에 setAttribute를 사용하여 이벤트와
이벤트 작동시 실행될 함수를 덮어 씌워줍니다
}
const changed = () => {
const passwordResult = '${memberDTO.memberPassword}';
const promptResult = prompt("기존 비밀번호 확인.", "입력해주세요.");
if (passwordResult != promptResult) {
alert("비밀번호 확인 필요.");
} else if (email.value == "guping"||email.value == "GUPING") {
alert("사용불가능한 email입니다.");
} else {
alert("수정 완료!\n로그아웃 됩니다");
gosave.submit();
}
};
이렇게 새로 덮어 씌워진 onclick이 실행되면 changed로 이름지은 함수가 실행됩니다
</script>아... 지금보니 이메일 중복 체크를 넣지 않았네요
따로 수정하겠습니다
'나의 수업일지' 카테고리의 다른 글
| 인천 일보 아카데미 58~67일 차 개인 프로젝트 - NAVER 지식in 클론 코딩 (2) (0) | 2023.06.07 |
|---|---|
| 인천 일보 아카데미 58~67일 차 개인 프로젝트 시작 - NAVER 지식in 클론 코딩 (1) (0) | 2023.06.07 |
| 인천 일보 아카데미 55일차 -회원제 게시판 만들기 - 회원가입 - 사진 프리뷰 / 회원가입 - 비밀번호 정규식 제약 조건 / 로그인 경고문 (0) | 2023.05.15 |
| 인천 일보 아카데미 54일차 -로그인 게시판- 틀만들기 (저장용 내용X) / 업로드 파일 이름 출력 (0) | 2023.05.10 |
| 인천 일보 아카데미 54일차 -비로그인 게시판- 검색 / 검색결과 페이징 (0) | 2023.05.10 |
