스탭코딩

[HTML/COS]COS 를 이용해 파일 업로드 하기

Web/JSP2017. 5. 15. 12:44

안녕하세요 스탭코딩 게시글 작성자 페이퍼클립입니다.


HTML에서 파일을 업로드 하기 위해서는 cos.jar 파일이 필요합니다

http://www.servlets.com/cos/ 에서 다운 받으셔도 되고 첨부해둔 파일을 다운 받아도 됩니다.


cos.jar


받은 파일은 프로젝트의 WEB_INF 아래 lib 폴더에 복사해 주세요


파일업로드를 위해 upload.jsp와 upload_result.jsp 파일을 준비했습니다.



[upload.jsp]


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ 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"%>
<script src="${pageContext.request.contextPath}/include/jquery-3.1.1.min.js"></script>
<script>
    
</script>
</head>
<body>
    <h2>파일 업로드 예제</h2>
    <form name="form1" method="post" enctype="multipart/form-data" action="upload_result.jsp">
        파일1 : <input type="file" name="file1"><br> 
        파일2 : <input type="file" name="file2"><br> 
        <input type="submit" value="업로드">
    </form>
</body>
</html>
cs



[upload_result.jsp]


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="java.io.*"%>
<%@ page import="com.oreilly.servlet.*"%>
<%@ page import="com.oreilly.servlet.multipart.*"%>
<!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"%>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
 
    <%
        
        String upload_path = "D:/upload";
        int size = 10 * 1024 * 1024; 
        String filename = "", filename2 = "";
        int filesize = 0, filesize2 = 0;
        try {
            
            MultipartRequest multi = new MultipartRequest(request, upload_path, size, "utf-8", new DefaultFileRenamePolicy());
                
            Enumeration files = multi.getFileNames();
            String file1 = (String) files.nextElement();  
            String file2 = (String) files.nextElement();  
        
            filename = multi.getFilesystemName(file1);  
            File f1 = multi.getFile(file1);
        
            filesize = (int) f1.length(); 
        
            filename2 = multi.getFilesystemName(file2);
            File f2 = multi.getFile(file2);
        
        
            filesize2 = (int) f2.length();
        } catch (Exception e) {
            e.printStackTrace();
        }
    %>
 
 
    파일1 이름 :    <%=filename%><br> 
    파일1 크기 :    <%=filesize%><br> 
    파일2 이름 :    <%=filename2%><br> 
    파일2 크기 :    <%=filesize2%><br>
    
</body>
</html>
cs



[STEP1 form태그 작성하기]


파일 업로드를 위해 upload.jsp에서 form 태그를 작성합니다. cos.jar 파일을 이용해 파일을 업로드 하기 위해서는 반드시  method를 post 방식으로, 인코딩타입을 multipart/form-data로 해야 합니다. action 속성으로 버튼 클릭시 upload_result.jsp로 (데이터를 가지고)이동하게 합니다.



[STEP2 upload_result.jsp 임포트]

cos.jar 파일을 이용하기 위해서 <%@ page import="com.oreilly.servlet.*"%>와 <%@ page import="com.oreilly.servlet.multipart.*"%>를 임포트 합니다. 

첨부파일을 받아 오기 위해 사용 될 File 클래스와 Enumeration 클래스를 위해 <%@ page import="java.util.*"%>와 <%@ page import="java.io.*"%>를 입포트 합니다.


[STEP3 MultipartRequest 객체 생성하기]

  
upload_result.jsp 페이지 이동 후 form으로 보낸 데이터를 업로드하기 위해서 

MultipartRequest 클래스의 객체를 만들어야 합니다. 멀티파트리퀘스트의 객체 생성자의 의미는 아래와 같습니다. 

new MultipartRequest(request객체,업로드경로 ,최대사이즈, 파일이름 인코딩방식 , 파일이름중복되었을때의 처리방식)
※최대 사이즈 단위는 byte 


[STEP4 form에서 보낸 데이터 받아오기]


첨부파일 집합 생성(클라이언트로 부터 받아 온 파일 이름의 집합)
Enumeration files = multi.getFileNames();

개별 파일의 이름 받아오기
String file1 = (String) files.nextElement();  
String file2 = (String) files.nextElement();  

업로드한 파일 이름 가져오기(서버로 부터 파일 이름 가져오기)
String filename = multi.getFilesystemName(file1);

파일 크기 구하기  (long타입으로 구하지기 때문에 int형으로 형변환함)
int filesize = (int) f1.length();

[STEP5 파일 이름과 크기 출력하기 ]

파일1 이름 : <%=filename%> 

파일1 크기 : <%=filesize%> 

티스토리툴바