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> |