자바 스크립트 이미지 미리보기 기능
- 이미지 파일을 업로드 하면 이미지를 미리보는 기능을 구현한것이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function() {
$("#filename").on('change', function(){
readURL(this);
});
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preImage').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form action="${pageContext.request.contextPath}/updatetNoticePro.do" method="post" enctype="multipart/form-data" name="noticeForm">
<input type='file' id="filename" name="filename"/>
<img id="preImage" src="${pageContext.request.contextPath}/saveFile/${noticeVO.filename}" alt="image_title" onerror='this.src="${pageContext.request.contextPath}/images/no_img.jpg"'/>
</form>
</body>
</html>
|
cs |
* 설명 :
소스 중 화면에 보이는 부분은 딱 2가지이다.
(1). 선택한 이미지 파일의 경로를 텍스트로 보여주는 부분
(2). 미리보기 이미지를 보여줄 img 태그
자바스크립트의 제이쿼리로 (1) 파일 경로가 바뀌는지 안바뀌는지 change를 감시하고 있다가,
내가 이미지 파일을 선택 하면, 내 이미지 파일의 경로가 (1)에 텍스트로 입력 된다.
그러면 감시하고 있던 제이쿼리 funtion이 실행 되어 readURL 함수가 실행된다. readURL 함수는
이미지 파일의 경로를 preImage img 태그의 src 속성으로 삽입하고 내가올린 이미지 파일이 img 태그에 보이게 된다.
서버에 올라간 것이 아니라 내 로컬의 경로가 삽입되어 보이게 되는 것이다.
=> 이게 핵심이다.
화면 실행 예제
1) 화면 폼
2) 파일 선택 클릭후 열기(O)
3)업로드 전 미리 보기
'개발 언어 > 자바 스크립트 java script' 카테고리의 다른 글
| [css] 웹 브라우저 프린터 배경색 나오도록 설정 (크롬/인터넷 익스플로어 등..) (0) | 2020.06.12 |
|---|---|
| [자바 스크립트] 셀렉트 박스 (select) 오늘 날짜 자동 선택 (0) | 2020.06.10 |
| javascript 닫기, 새로고침 이벤트 처리 (정말 나가시겠습니까?) (0) | 2020.01.13 |
| 셀렉트박스(select) 변경 이벤트 처리하기 [javascript] (0) | 2019.03.26 |
| [웹] 데이트 피커 추가 [nice-date-picker js] [달력추가] (0) | 2019.03.21 |
댓글