본문 바로가기

업무 채널

[JSP] 이미지(파일) 업로드 작성 예제소스

jsp 이미지 및 파일 업로드

 

먼저 이클립스와 톰캣설치 및 연동이 되있는 것으로 가정하고 예제를 진행한다.

테스트는 로컬로 진행할 것이며,

설치가 안되있는 분은 하고 오시길 바란다.

 

 

먼저 이클립스에서 Dynamic Web Project 를 생성한다.

생성이 되었으면 해당 프로젝트의 WebContent - WEB-INF - lib 폴더안에 아래의 첨부파일을 넣어준다.

 

cos.jar

Cos.jar 파일은 jsp에서 파일업로드 시 필요한 파일이다.

 

 

 

이제 소스를 살펴보자.

upload.jsp는 이미지나 파일을 찾아 전송하는 소스이다.

 

 [upload.jsp]

<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<form method="post" enctype="multipart/form-data" action="imgup.jsp">
<input type="file" name="filename1" size=40>
<input type="submit" value="업로드"><br><br>
</form>

<body>

</body>
</html>

 

 

 

imgup.jsp는 업로드한 이미지를 서버에 저장하고 화면에 뿌려주는 소스이다.

 

 imgup.jsp

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%@ page import="com.oreilly.servlet.MultipartRequest,com.oreilly.servlet.multipart.DefaultFileRenamePolicy,java.util.*,java.io.*" %>
<%@ page import="java.sql.*" %>

<%
 request.setCharacterEncoding("euc-kr");
 String realFolder = "";
 String filename1 = "";
 int maxSize = 1024*1024*5;
 String encType = "euc-kr";
 String savefile = "img";
 ServletContext scontext = getServletContext();
 realFolder = scontext.getRealPath(savefile);
 
 try{
  MultipartRequest multi=new MultipartRequest(request, realFolder, maxSize, encType, new DefaultFileRenamePolicy());

  Enumeration<?> files = multi.getFileNames();
     String file1 = (String)files.nextElement();
     filename1 = multi.getFilesystemName(file1);
 } catch(Exception e) {
  e.printStackTrace();
 }
 
 String fullpath = realFolder + "\\" + filename1;
%>

<title>Insert title here</title>
</head>
<body>
<img src="<%=fullpath%>" width=512 height=384></img>
</body>
</html>

 

소스 실행시 서버의 imgup(프로젝트명)\img 폴더에 파일이 전송되도록 되어있으므로 폴더를 생성해 주어야한다.

로컬서버로 전송 시 다음 경로에 폴더를 생성하면 된다.

C:\Users\\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\imgup

경로안에 img 폴더를 생성한다.(사용자의 이클립스 웍스페이스 경로 참조)

 

서버와 연동할 경우에는 path를 수정하여 사용하면 된다.

 

 

동작화면

 

 

upload.jsp 실행화면시 나타나는 화면이다.

찾아보기 버튼을 클릭하여 전송할 파일을 선택한다.

 

 

 

튤립을 선택하고 업로드 버튼을 누른다.

 

 

 

화면에 튤립 이미지가 뿌려진다.

 

 

 

C:\Users\\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\imgup\img\

위에서 생성한 경로에 파일이 저장된 것을 확인한다.