728x90
반응형
input type="file" 이미지 미리보기
가끔 파일첨부 시 이미지일 경우 미리보기해야 할 경우가 있다.
아래 코드 처럼 로컬의 이미지를 미리보기할 수 있다.
<script>
$(function(){
$("#photo").on("change", function(){
preview(this, "#preview");
});
});
function preview(input, id){
if(input.files && input.files[0]){
var fr = new FileReader();
fr.onload = function(e){
$(id).attr("src", e.target.result);
}
fr.readAsDefaultDataURL(input.files[0]);
}
}
</script>
<body>
<div>
<img src="" id="preview">
</div>
<inut type="file" id="photo" accept="image/*">
</body>
728x90
반응형
'HTML > JS & jQuery' 카테고리의 다른 글
| [JS] 문자열 공백 제거하기 (0) | 2025.02.12 |
|---|---|
| [jQuery] jquery live, bind, delegate를 on 대체 (0) | 2019.03.05 |
