728x90
반응형
<%@page import="java.io.IOException"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@page import="java.io.File"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%--src/main/webapp/medel1/member/imgupload.jsp --%>
<%--
1. 파일 업로드하기 : 업로드 위치 => model1/member/picture/ 로 설정
2. 파일의 내용을 opener에 출력하기. 현재 윈도우는 close함
--%>
<% //파일 업로드 폴더 위치
String uploadPath = application.getRealPath("/") + "model1/member/picture/";
File f = new File(uploadPath);
if(!f.exists()) f.mkdirs(); //폴더 생성
String filename = null;
try {
MultipartRequest multi = new MultipartRequest(request, uploadPath, 10*1024*1024, "utf-8"); //파일 업로드
filename = multi.getFilesystemName("picture"); //업로드된 파일
} catch(IOException e) {
e.printStackTrace();
}
%>
<script>
//opener id속성값이 pic인 테그 => <img 태그...>
img = opener.document.getElementById("pic");
img.src = "picture/<%=filename%>";
//opener form 태그의 picture 파라미터에 파일이름 설정
opener.document.f.picture.value="<%=filename%>";
self.close(); //현재 창 (팝업창) close()
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%--src/main/webapp/medel1/member/memberimg.jsp --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원사진등록</title>
</head>
<body>
<h3>사진 업로드</h3>
<form action="imgupload.jsp" method="post" enctype="multipart/form-data">
<input type="file" name="picture" id="imagefile" accept="img/*">
<input type="submit" value="사진등록">
</form><br>
<img id="preview" src="">
<script type="text/javascript">
//자바스트립트로 이미지 미리보기.
//imagefile : <input type="file" name="picture" id="imagefile" accept="img/*">
let imagefile = document.querySelector("#imagefile")
//preview : <img id="preview" src="">
let preview = document.querySelector("#preview")
//change 이벤트 등록 : 파일선택이 변경 될 때 실행
imagefile.addEventListener("change",function(e){
// e.target : 이벤트 발생 태그
let get_file = e.target.files //선택된 파일들.
let reader = new FileReader() //파일 읽기 객체
reader.onload = (function(img){
return function(e) {
img.src = e.target.result;
}
})(preview)
if(get_file) {
reader.readAsDataURL(get_file[0]);
}
})
</script>
</body>
</html>
728x90
반응형
'study > MVC' 카테고리의 다른 글
| [MVC] 16. MVC Model1 방식 - 회원가입 (비밀번호찾기) (0) | 2022.04.12 |
|---|---|
| [MVC] 16. MVC Model1 방식 - 회원가입 (아이디찾기) (0) | 2022.04.12 |
| [MVC] 16. MVC Model1 방식 - 회원가입 (파일업로드) (0) | 2022.04.11 |
| [MVC] 16. MVC Model1 방식 - 회원가입 (탈퇴, 강제탈퇴) (0) | 2022.04.11 |
| [MVC] 16. MVC Model1 방식 - 회원가입 (회원목록보기) (0) | 2022.04.11 |