통합검색

Javascript

[jQuery] file 인풋에 이미지 첨부시 썸네일 보여주기(Blob)

  • 2022.04.17 13:28:28


file 인풋에 이미지 파일 첨부시
첨부한 이미지의 썸네일을 보여주는 예제이다.

첨부한 이미지의 Blob 정보를 생성하여 임시 이미지를 생성해 준다.

[!]jQuery[/!]
 
blobimg = {
    'init' : function(){
        this.action();
    },
    'action' : function(){
        changeIMG = function(obj){
            var $this = obj;
            
            if($this.files && $this.files[0]){
                var reader = new FileReader();
                reader.readAsDataURL($this.files[0]);
                
                reader.onload = function(e){
                    var fileName = e.target.result;
                    $($this).parents('.filebox').find('.tmb').find('img').attr('src',fileName);
                }
                
            }
        }
        $(':file').on({
            'change' : function(){
                changeIMG(this);
            }
        })
    }
}
$(function(){
    blobimg.init();
});

[!]HTML[/!]
 
<div class="filebox">
    <div class="tmb">
        <img src="" alt="" />
    </div>
    <input type="file" name="" id="" />
</div>