image file 등록 후 image 미리보기

게시판에 게시글을 등록 할 때 글을 대표하는 이미지를 썸네일 형식으로 보여주기 기능을 구현하는 경우가 종종 있습니다.
이럴때 경비가 넉넉하다면 유료 컨포넌트를 구입하여 업로드 기능을 구현하면 좋겠지만, 그렇지 않거나 가벼운 사이트에서는 간단하게 하기와 같은 방법으로 구현 할 수 있습니다.
하여 이번에는 image file 등록 후 image 미리보기에 관해서 알아보겠습니다.

먼저 html에 컨트롤을 아래와 같이 추가 합니다.
<form id="frm1">

<input type='file' id="fileImage1" />

<img id="previewImage1" src="#" alt="이미지 미리보기" />

</form>



그리고 하기와 같이 자바스크립트를 구현해주면 끝!!!
function readURL(input)
{
   if (input.files && input.files[0])
   {
      var reader = new FileReader();
      reader.onload = function (e)
      {
         $('#blah').attr('src', e.target.result); 
      }

      reader.readAsDataURL(input.files[0]);
   }
}

$("#fileImage1").change(function(){
   readURL(this); 
});




type="file" 파일 업로드 컨트롤에 change 이벤트를 걸어서 readURL 함수를 호출하게 한 후 자바스크립트에서 제공하는 FileReader 객체로 파일을 읽어 img 컨트롤에 해당 파일 이미지를 제공하는 방법 입니다.

이상으로 image file 등록 후 image 미리보기에 대해서 알아보았습니다.
필요하신 분에게 많은 도움이 되었으면 좋겠네요...ㅎ
모두 건강하세요~~~^^