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


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

이미지

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

이미지

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

이미지 저장 로직은

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

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

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

  • 2016년 07월 31일에 작성됨
    웹 사이트 공부 중입니다. 많은 도움 주시면 좋아요.

조회수 219


1 답변


좋아요
1
싫어요
채택취소하기

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

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

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

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

  • 2016년 07월 31일에 작성됨
    웹을 좋아함

  • 아 node.js 에 ejs 엔진 사용 중입니다. 음 일단 감사합니다 한 번 해보겠습니다!    상남자   2016.7.31 15:10     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close