열심히 끝까지
디바이스 융합 자바(Java) day55 - 이미지 미리보기 본문
>> 이미지 미리보기
- 이미지를 올리면 아래에 이미지를 띄울 예정
- 이미지 소스를 넣기 위해 id로 줄 것
>> js로 줄 예정
>> onchange 되었을 때, 사진 가져오기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 미리보기</title>
</head>
<body>
<!-- 이미지를 올리면 -->
<!-- loadFile()함수는 없음, 만들 예정 -->
<input type="file" onchange="loadFile(this);">
<hr>
<!-- 이미지를 띄울 예정 -->
<!-- 이미지 소스를 넣어야하는데 js로 줄 것이기 때문에 id로 줌 -->
<!-- onchange가 되었을 때, id로 놓고 이 id에 아래의 사진을 가져옴 -->
<img alt="미리보기" id="preview"/>
<script type="text/javascript">
function loadFile(input){
//console.log('로그1');
if(input.files && input.files[0]){ // 파일을 여러 개 들어올 것을 예상해서
//console.log('로그2');
var fr=new FileReader();
fr.onload=function(event){
//console.log=('로그3');
document.getElementById('preview').src = event.target.result;
};
fr.readAsDataURL(input.files[0]);
}
else{
// 필수 속성이니까 공백값을 주는 것이 기본
//console.log('로그4');
document.getElementById('preview').src="";
}
}
</script>
</body>
</html>
=======================================
>> JS와 AJAX 사용
1. 화면 깜빡임(C 방문) == 서버 사용
> 화면 깜빡임(C 방문) 없이 DB 데이터가 필요하면 -> .ajax() == 비동기처리
2. 화면 깜빡임(C 방문)없이 어떤 기능을 수행해야할 때 -> .JS == 프론트
'디바이스 융합 자바(Java)기반 풀스택 개발자 양성과정(수업내용)' 카테고리의 다른 글
| 디바이스 융합 자바(Java) day64(2) - Spring (IoC[제어의 역행], AOP[관점지향 프로그래밍]) (1) | 2022.09.13 |
|---|---|
| 디바이스 융합 자바(Java) day64(1) - Spring 설치 (0) | 2022.09.13 |
| 디바이스 융합 자바(Java) day54 - 이미지 업로드 (0) | 2022.08.26 |
| 디바이스 융합 자바(Java) day53 - AJAX 이용한 아이디 중복 체크 (0) | 2022.08.25 |
| 디바이스 융합 자바(Java) day52 - 팀프로젝트 작업 및 frontController 질문 및 답변 (0) | 2022.08.24 |
'디바이스 융합 자바(Java)기반 풀스택 개발자 양성과정(수업내용)' Related Articles
more
