728x90
input 태그에 파일을 선택해 넣으면 함수가 발동되게 작업되어있다.
해당 함수는 FileReader 객체를 만들어 이벤트가 발생되었을 때 해당 이벤트의 결과를
FileReader 객체가 onload 할 수 있도록 구성되어 있다.
예제를 위한 .jsp 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 미리보기</title>
</head>
<body>
<input type="file" onchange="loadFile(this);">
<hr>
<img alt="미리보기" id="preview" />
<script type="text/javascript">
function loadFile(input){
if(input.files && input.files[0]){
var fr = new FileReader();
fr.onload = function(event){
document.getElementById('preview').src = event.target.result;
}
fr.readAsDataURL(input.files[0]);
}
else {
document.getElementById('preview').src = "";
}
}
</script>
</body>
</html>
수행 결과
728x90
'web' 카테고리의 다른 글
| 이미지 업로드 (0) | 2022.08.29 |
|---|---|
| Ajax 이용하여 아이디 중복검사하기 (0) | 2022.08.25 |
| JSP - MVC 모델 2 (0) | 2022.08.23 |
| JSP 태그 활용 (0) | 2022.08.22 |
| 필터(Filter) (0) | 2022.08.21 |