[HTML/COS]COS 를 이용해 파일 업로드 하기
안녕하세요 스탭코딩 게시글 작성자 페이퍼클립입니다.
HTML에서 파일을 업로드 하기 위해서는 cos.jar 파일이 필요합니다
http://www.servlets.com/cos/ 에서 다운 받으셔도 되고 첨부해둔 파일을 다운 받아도 됩니다.
받은 파일은 프로젝트의 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 객체 생성하기]
[STEP4 form에서 보낸 데이터 받아오기]
파일1 이름 : <%=filename%>
파일1 크기 : <%=filesize%>