저장한 이미지가 있으면 보여주고 없으면 등록하는 화면 구현 input type = file

조회수 2447회

회원정보 관리 화면을 만들 때,

이미지

프로필 사진을 등록하지 않은 상태면 위와 같은 모습

이미지

프로필 사진을 등록한 상태면 위와 같은 모습을 보여주게 하려고 합니다.

이미지 저장 로직은

업로드 후 저장버튼을 누르면 image파일은 웹서버 디렉터리에 저장되고, 경로를 db에 저장하게 했습니다.

위 css는 jasny bootstrap 을 사용했습니다.

file 쪽을 처음 개발해보고 있는데 신경 쓸것도 많고 어렵네요. ㅠㅠ

1 답변

  • 좋아요

    1

    싫어요
    채택 취소하기

    어떤 템플릿 엔진을 사용하시는진 모르겠지만 로직은 간단합니다.

    DB에서 사진경로를 가져올때 비어있으면 업로드, 있다면 변경 및 삭제로 인도하시면됩니다

    if image // 이미지가 있다
        <img src="{{ image }}"> // 템플릿에서 이미지 보여주기 처리
        <input type="file"> // 변경 및 삭제 마크업
    else // 아니면
        <img src="nothing.png"> // 하얀 사진 
        <input type="file"> //업로드
    endif
    
    

    이런식으로 처리하시면 됩니다.

    • (•́ ✖ •̀)
      알 수 없는 사용자
    • 아 node.js 에 ejs 엔진 사용 중입니다. 음 일단 감사합니다 한 번 해보겠습니다! 상남자 2016.7.31 15:10

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)