[Javascript] input file 이미지 미리보기, 썸네일 보기, Thumbnail

Posted by Find my true self Fimtrus
2013.07.10 14:11 Programming/Hybrid App
/**
  * 이미지 썸네일을 불러오는 function
  * @param html : input 필드의 dom을 인자로 받는다. 물론 타입은 file
  * @param $target : 불러온 이미지를 적용할 jquery 객체.
  **/
function getThumbnail(html, $target) {
	if (html.files && html.files[0]) {
		var reader = new FileReader();
		reader.onload = function (e) {
			$target.css('background-image', 'url(\"' + e.target.result + '\")');
		}
		reader.readAsDataURL(html.files[0]);
	}
}


냉무.
이 댓글을 비밀 댓글로
  1. 안녕하세요 혹시 위 소스 사용법좀 알수있을까요?
    아래와 같이 코딩해서 테스트해보니 html.files 에서 에러가 발생하더라구여
    dom 객체를 어떤식으로 넘겨 주어야 하나요?
    감사합니다. 좋은하루되세요.
    ===============================================
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    function getThumbnail(html, $target) {
    if (html.files && html.files[0]) {

    var reader = new FileReader();
    reader.onload = function (e) {
    $target.css('background-image', 'url(\"' + e.target.result + '\")');
    }
    reader.readAsDataURL(html.files[0]);
    }
    }
    function filechange(){
    var $target = $("#test");
    var html = document.getElementById("file1");
    getThumbnail(html,$target);

    }
    </script>
    <div id="test"></div>
    <input id="file1" type="file" onchange="javascript:filechange();">
    • 제가 이제 봤네요...한동안 너무 바쁘게 지내서 블로그를 돌볼 시간이 없었어요.

      해결하셨다고 생각하지만 답변드릴께요.

      getThumbnail 이라는 function은 두개의 인자를 받습니다.

      첫번째는 input tag의 input document 객체, 즉 document.querySelector('input') 하였을때 나오는 객체를 말합니다.
      file dom을 말하는거죠..
      두번째인자인 target은 jquery 객체를 말하는건데....
      소스 보시면 알겠지만 읽어 들인 파일의 thumbnail을 표시할 객체입니다.
      img tag일수도 있고, background를 주기 위한 division일 수도 있습니다.
      저는 division에 background-image로 적용하였습니다.

      결론을 말씀드리면, html은 input tag의 dom 객체를 넘기면 됩니다.

      더 궁금하신게 있으시다면 답변바랍니다.