728x90
(관련 포스팅 : (# Spring - 파일 업로드 연습1 (일반적인 방식))[http://doublesprogramming.tistory.com/127]
(관련 포스팅 : (# Spring - 파일 업로드 연습2 (파일명 중복제거))[http://doublesprogramming.tistory.com/128]
이전 포스팅에서는 업로드 결과를 업로드 결과 페이지로 이동하여 출력했는데 이번에는 <iframe>1 태그를 사용하여 업로드 결과를 현재 페이지에서 출력해보자.
iframe에 업로드 결과 출력
1. 업로드 파일 입력 페이지
<%@ 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>
<%@ include file="../include/header.jsp" %>
<style>
/* iframe 스타일 설정 */
iframe {
width: 600px;
height: 100px;
border: 1px;
border-style: solid;
}
</style>
</head>
<body>
<%@ include file="../include/menu.jsp" %>
<!-- target을 지정한 곳으로 form data가 이동 -->
<form id="form1" target="iframePhoto" action="${path}/upload/uploadForm" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="업로드">
</form>
<!-- form data가 이곳으로 이동 -->
<iframe name="iframePhoto"></iframe>
<script>
function addFilePath(msg){
console.log(msg); // 파일명 콘솔 출력
document.getElementById("form1").reset(); // ifream에 업로드결과를 출력 후 form에 저장된 데이터 초기화
}
</script>
</body>
</html>
2. 업로드 파일 결과 페이지
<%@ 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>
<%@ include file="../include/header.jsp" %>
</head>
<body>
파일이 업로드 되었습니다.<br>
파일명 : ${savedName}
<script>
var result = "${savedName}";
parent.addFilePath(result); // 파일명을 부모페이지로 전달
</script>
</body>
</html>
결과 확인
파일을 선택한 후 업로드 버튼 클릭
업로드 결과 페이지로 이동하지 않고 현재 페이지에서 결과 출력