JSP 5일차 : 파일업로드
JSP 파일업로드
-
http://www.servlets.com/cos/ 에서 cos~ 에 관한 파일을 다운받은후 압축을 풀고 cos.jar 파일을 WEB-INF 의 lib 폴더에 넣는다
-
폼을 만들때는 반드시 폼태그 속성을 이렇게 주자
method="post" enctype="multipart/form-data" -
파일이 저장되는 실제 경로 구하기
ServletContext context=getServletContext(); realfolder=context.getRealPath(savefolder); -
MultipartRequest 라는 클래스를 사용
생성자 (request,fileDirectory(업로드할 경로),1024*5(업로드할 파일의 크기), "euc-kr"(한글타입) , new DefaultFileRenamePolicy()) -
주요 메소드
1) getParameterNames() : input 타입의 name들을 반환 (반환값:Enumeration)
2) getParameter(“name”) : name 에 해당하는 value 값 반환
3) getFileNames() : input 타입에서 속성이 file 로 된 이름들을 반환(반환값:Enumeration)
4) getFilesystemName(name) : 실제 업로드된 파일명(동일한이름일경우 변경된 이름반환
5) getOriginalFileName(name) : 변경되기 전의 원래 파일명
6) getFile(name) : File 타입 리턴(파일 크기등을 알아볼수 있다)
fileUploadForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>JSP업로드 연습 - 이미지 업로드</h2>
<form action="Ex1_fileUploadAction.jsp" method="post" enctype="multipart/form-data">
이름 : <input type="text" name="name"><br>
제목 : <input type="text" name="subject"><br>
이미지 : <input type="file" name="uploadfile" ><br>
<input type="submit" value="submit" >
</form>
</body>
</html>
fileUploadAction.jsp
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 업로드 연습</title>
</head>
<body>
<%
int fileSize = 1024*1024*3; //3mb로 파일 크기를 제한
ServletContext context = getServletContext();
String uploadPath = context.getRealPath("/save");
%>
업로드 경로 확인 : <%=uploadPath %><br>
<%
MultipartRequest multi = null;
try{
multi = new MultipartRequest(request, uploadPath, fileSize, "UTF-8",new DefaultFileRenamePolicy());
String name = multi.getParameter("name");
String subject = multi.getParameter("subject");
String originalFile = multi.getOriginalFileName("uploadfile");
String uploadFile = multi.getFilesystemName("uploadfile");
%>
<h1>읽어온 데이타 출력하기</h1>
이름 : <%=name %><br>
제목 : <%=subject %><br>
오리지날 파일명 : <%=originalFile %><br>
실제 업로드된 파일명 : <%=uploadFile %><br><Br>
<h3>업로드된 파일 불러오기</h3>
<img src="../save/<%=uploadFile %>">
<%
}catch(Exception e){
out.write("업로드 용량 오류 또는 그 이외..." + e.getMessage());
}
%>
</body>
</html>
filePreview.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
</head>
<body>
<hr>
<input type="button" value="업로드 폴더 초기화!" onclick="location.href='Ex1_fileDelete.jsp'">
<hr>
<form action="Ex1_fileUploadAction.jsp" method="post" enctype="multipart/form-data">
이름 : <input type="text" name="name"><br>
제목 : <input type="text" name="subject"><br>
이미지 : <input type="file" name="uploadfile" onchange="readURL(this);"><br>
<img id="blah" src="http://placehold.it/180" alt="your image" style="width:100px" /><br>
<input type="submit" value="submit" >
</form>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
fileDelete.jsp
<%@page import="java.io.File"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
ServletContext context = getServletContext();
String uploadPath = context.getRealPath("/save");
File file = new File(uploadPath);
File files[] = file.listFiles();
if(files!=null && files.length>0){
for(File f:files){
%>
<%=f.getName() %>(<%=f.isDirectory()?"디렉토리":"파일" %>)<br>
<%
}
for(File f:files){
f.delete();
}%>
<h3>총 <%=files.length %>개의 파일 삭제 완료!</h3>
<%
}else{
%>
<h3>삭제할 파일이 없음.</h3>
<%
}
%>
<a href="javascript:history.back();">이전으로 돌아가기</a>
</body>
</html>
Comments