고정 헤더 영역
상세 컨텐츠
본문
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>반응형
'IT&DEV' 카테고리의 다른 글
| [NAS] 시놀로지 나스와 구글 DDNS 연결하기 (0) | 2021.08.09 |
|---|---|
| [NAS] 시놀로지 NAS의 IP가 변경되는 경우(유동IP) 도메인 접속 안되는 문제 대응 방법 (0) | 2021.08.09 |
| [jQuery] file 인풋에 이미지 첨부시 썸네일 보여주기(Blob) (0) | 2021.08.09 |
| [jQuery] radio, checkbox 디자인 하기 (0) | 2021.08.09 |
| [jQuery] bxslider 반응형에서 갯수 다르게 노출하기 (0) | 2021.08.09 |
| [HTML] 파비콘(Favicon) 설정하기 (0) | 2021.08.09 |
태그
댓글 영역