FileReader 이미지 미리보기

배고픈 징징이 ㅣ 2023. 1. 26. 14:57

<div class="form-box">
	<div class="input-photo">
		<h2 class="blind">반려동물 프로필 사진</h2>	
		<input type="file" name="POPFILE" class="file-add" title="탭 하여 사진 첨부하기" />
		
		<a href="#none" id="SHOWFILE" class="file-in" title="탭 하여 사진 첨부하기" style="display:none;">
			<img src="../../assets/img/sample/img_sample_375x253.jpg" alt="반려견 이미지">
		</a>		
	</div>
</div>
$(document).on("change", "input[name=POPFILE]", function(e){
	var file = e.target.files[0];
	
	if (!file.type.match("image.*")) {
		return alert("only image");
	}
	
	var reader = new FileReader();
	
	reader.readAsDataURL(file);
	reader.onload = function(e){			
		$("#SHOWFILE").css("background-image", "url('" + e.target.result + "')");
		$("#SHOWFILE").click(function(){
			 removeFile();
		});
	}
	$(this).css("display", "none");
	
	$("#SHOWFILE").css("display", "");
});
반응형

'Client Side' 카테고리의 다른 글

필수사항 체크  (0) 2023.01.27
async & await  (0) 2023.01.27
var, const, let  (0) 2023.01.26
Ajax Option  (0) 2023.01.26
$.extend() - merge기능의 함수  (0) 2023.01.20