[JavaScript] [요리 후기]이미지 영역 클릭시 파일 등록하기 | 첨부파일 미리보기 |

* 세미 프로젝트에서 구현한 기능들을 복습 겸 정리해보려고 합니다.

당연한 이야기이지만, 제 코드가 정답은 아니기 때문에 감안하고 읽어주시면 감사하겠습니다.

 

 

 

이번 포스팅은 요리 후기 작성 기능에서 사용한 JavaScript입니다. 

추가적으로 업데이트할 예정입니다.

 

요리 후기 작성 기능은 하단의 포스팅 참고해주시면 감사하겠습니다.

 

[요리 후기 작성] 요리 후기 작성 기능 구현

 

---

 

<목차>

• 이미지 영역 클릭시 파일 등록하기 
• 첨부파일 미리보기

 

 

---

 

1. 이미지 영역 클릭 시 파일 등록하기

 

대략적인 UI는 다음과 같습니다.

 

이미지 영역 호버 시 툴팁이 출력되고, 클릭 시에는 파일이 등록되도록 구현했습니다.

 

이미지 영역 호버 시 툴팁 

HTML

<div align="center">
  <h6>
  한 장이라도 좋아요 <br>
  완성된 요리를 자랑해주세요
  </h6><br><br>
  
  <a data-toggle="tooltip" title="인증샷 자랑하기! ">
    <img id="reviewImg" width="150px" height="150px">
  </a>
</div>

JavaScript

<script>
  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
  });
</script>

 

---

 

이미지 영역 클릭 시 파일 등록

 

HTML

<div class="input-type" id="file-area">
	<input type="file" id="reviewImg1" onchange="loadImg(this,1)" class="form-control-file border" name="reviewUpfile" required>
</div>

JavaScript

<script>
  $(function(){

    $("#file-area").hide();  
    $("#reviewImg").click(function(){
      $("#reviewImg1").click();	
    })
    
  })

</script>

 

먼저 아이디가 file-area인 요소를 숨깁니다. 그리고 아이디가 reviewImg인 요소 클릭 시, 함수가 실행되는데,

아이디가 reviewImg1인 요소가 클릭됩니다.

즉, 이미지 영역을 클릭하면 아이디가 reviewImg1인 input type file이 클릭되도록 구현했습니다. 

 

---

첨부파일 등록 시 미리 보기

HTML

<div class="input-type" id="file-area">
	<input type="file" id="reviewImg1" onchange="loadImg(this,1)" class="form-control-file border" name="reviewUpfile" required>
</div>

HTML은 위와 동일합니다. 여기서 포인트는 onchange 이벤트입니다.

input type="file"에 변화가 감지되면 loadImg라는 함수를 호출하게 되는데,

이때 이벤트가 발생한 요소 (this)와 매개변수 (==1)를 넘겨줍니다. 

 

 

JavaScript

 

이벤트 발생 시 실행되는 함수는 다음과 같습니다.

function loadImg(inputFile,num){

  if(inputFile.files.length == 1){

    var reader = new FileReader();

    reader.readAsDataURL(inputFile.files[0]);
    reader.onload = function(e){
    	$("#reviewImg").attr("src",e.target.result);
    }

   } else {
    	$("#reviewImg").attr("src",null);
    }

}
							

inputFile이 있다면 inputFile.files.length이 1로 반환되기 때문에, 그것을 활용해서 조건 검사를 해줍니다.

FileReader() 객체는 비동기적으로 파일의 내용을 읽어 들이는 데 사용됩니다.

. readAsDataURL()는 readAsDataURL는 즉, 파일 정보를 주소처럼 사용할 수 있고, img 태그의 src로도 사용할 수 있습니다.

 

FileReader가 즉시 파일을 읽는 게 아니기 때문에 onload 이벤트 핸들러를 붙여서 콜백으로 파일을 다 읽었다는 것을 알려주도록 해야 합니다.

 

콜백 함수란?

어떤 이벤트에 의해 호출되는 함수입니다.

 

onload 함수란?

자바스크립트에서 페이지가 로드되면 자동으로 실행되는 전역 콜백 함수 

페이지의 모든 요소들이 로드되어야 호출되며, 한 페이지에서 하나의 window.onload() 함수만 적용된다.

 

onload=function(){}

 

따라서 이미지를 올리고 바로 미리보기를 표시하고 싶을 때, onload 이벤트 핸들러가 실행되고 아이디가 reviewImg인 요소의 src 속성으로  e.target.result를 부여합니다. e.target은 이벤트가 일어난 대상, 즉 input 자신을 가리킵니다.

 

 

---