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