상세 컨텐츠

본문 제목

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

IT&DEV

by 린이파파 2021. 8. 9. 11:53

본문

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

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

 

javascript

blobimg = {
  'init' : function(){
    
  },
  '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>
반응형

관련글 더보기

댓글 영역