인천 일보 아카데미 54일차 -로그인 게시판- 틀만들기 (저장용 내용X) / 업로드 파일 이름 출력

나의 수업일지

인천 일보 아카데미 54일차 -로그인 게시판- 틀만들기 (저장용 내용X) / 업로드 파일 이름 출력

GUPING 2023. 5. 10. 01:16

로그인 게시판 만들어보기

그동안 배운 내용으로 3일동안 조건에 맞는 로그인 게시판 만들어보기

회원제게시판_요구사항.pdf

0.24MB

틀만들기 시작

<body>
<%@include file="./component/header.jsp" %>
<%@include file="./component/nav.jsp" %>
<section>
    <div>
        <h2>index입니다</h2>
    </div>
</section>
<%@include file="./component/footer.jsp"%>
</body>

include - header

<header>
    <div>
        <h2>MemberBoard</h2>
    </div>
</header>

include - nav

<nav>
    <div>
        <ul>
            <li><a href="/member/save">회원가입</a></li>
            <li><a href="#">로그인</a></li>
            <li><a href="#">글목록</a></li>
        </ul>
    </div>
</nav>

include - footer

<footer>
  <div id="footer">

  </div>
</footer>

<script>
  const date = new Date();
  const footer = document.getElementById('footer');
  footer.innerHTML = "<p>&copy"+date.getFullYear() + "&nbsp;HRDKOREA All rights reserved."
</script>

memberSave.jsp - 틀만들기 (기능 x )

만들면서 찾아보고 배운부분

input type file을 하면 브라우저에따라 기본 이미지가 다르기 때문에

이쁘지가 않고 특히 크롬으로 볼경우 파일이 없음 text가 붙어나와 거슬린다

이부분을 제거하고 파일이 업로드 되었을때 파일명만 따로 출력하기 위해 replace를 사용했다

replace를 사용하여 /c:\\fakepath\\/i 대소문자를 포함하여 앞에 붙는 파일의 경로를 , " " 로 변환하였다

<tr>
    <th>
        <label for="memberProfile">증명사진</label>
    </th>
</tr>
<tr>
    <th>
        <p id="fileName"></p>
    </th>
</tr>
<tr>
    <th><input type="file" accept="image/*" name="memberProfile" id="memberProfile" multiple style="display: none" 
               onchange="javascript:document.getElementById('fileName').innerHTML =(this.value.replace(/c:\\fakepath\\/i,''))"></th>
</tr>

출처

[자바스크립트] replace() 문자 변환, 치환

자바스크립트를 사용해 특정 문자를 다른 문자로 치환하는 방법에 대하여 알아볼까합니다. 먼저 사용할 메소드는 replace() 입니다.

webisfree.com