[JSP] - 이미지 파일 올렸을 때 미리보기
○ 이미지 파일 올렸을 때 미리보기 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var InputImage = (function loadImageFile() { if (window.FileReader) { var ImagePre; var ImgReader = new window.FileReader(); var fileType = /^(?:image\/bmp|image\/gif|image\/jpeg|image\/png|image\/x\-xwindowdump|image\/x\-portable\-bitmap)$/i; ImgReader.onload = function(Event) { if (!ImagePre) { var newPreview = document.getElementById("imagePreview"); ImagePre = new Image(); ImagePre.style.width = "200px"; ImagePre.style.height = "140px"; newPreview.appendChild(ImagePre); } ImagePre.src = Event.target.result; }; return function() { var img = document.getElementById("image").files; if (!fileType.test(img[0].type)) { alert("이미지 파일을 업로드 하세요"); return; } ImgReader.readAsDataURL(img[0]); } } document.getElementById("imagePreview").src = document .getElementById("image").value; })(); </script> </head> <body> <div id="imagePreview"></div> <br> <input id="image" type="file" onchange="InputImage();"> </body> </html> |
'JSP 개발 참고' 카테고리의 다른 글
| [JSP] - 게시물 검색 및 검색된 내용의 DB 출력하기 (0) | 2018.05.05 |
|---|---|
| [JSP] - 게시물 작성 및 게시물 DB 출력하기 (0) | 2018.05.04 |
| [JSP] - 파일 enctype="multipart/form-data" 사용 시 request.getParameter null 해결방법 (0) | 2018.05.02 |
| [JSP] - 네이버 스마트에디터 사용 (0) | 2018.05.02 |
| [JSP] - 이미지 DB 처리 및 이미지 출력 (3) | 2018.05.02 |