파일 업로드(file upload)
웹 브라우저에서 서버로 파일을 전송하여 서버에 저장하는 것
- 웹 브라우저에서 서버로 파일을 전송하여 서버에 저장하는 것
- 서버로 업로드할 수 있는 파일
텍스트 파일, 바이너리 파일, 이미지 파일, 문서 등 다양한 유형이 있음
- 웹 브라우저에서 서버로 파일을 전송하기 위해J SP 페이지에 폼 태그 사용
- 전송된 파일을 서버에 저장하기 위해 오픈 라이브러리 이용파일 업로드를 위한 JSP 페이지
- 웹 브라우저에서 서버로 파일을 전송하기 위해 JSP 페이지에 폼 태그를 작성할 때 몇 가지 중요한 규칙
- form 태그의 method 속성은 반드시 POST 방식으로 설정
- form 태그의 enctype 속성은 반드시 multipart/form-data로 설정
- form 태그의 action 속성은 파일 업로드를 처리할 JSP 파일로 설정
- 파일 업로드를 위해 input 태그의 type 속성을 file로 설정
- 만약 여러 파일을 업로드하려면 2개 이상의 input 태그를 사용하고 name 속성에 서로 다른 값을 설정
파일 업로드 처리 방법
- 단순한 자바 코드로 작성하여 처리할 수 없어 오픈 라이브러리인 cos.jar나 commonsfileupload.jar를 사용해야 함
파일 업로드 처리 방법
Commons-FileUpload를 이용한 파일 업로드
Commons-FileUpload
파일 업로드 패키지
서버의 메모리상에서 파일 처리가 가능하도록 지원
오픈 라이브러리 commons-fileupload.jar, commons-io.jar 파일을 배포 사이트에서 직접 다운로드해서 사용
- 배포 사이트: http://commons.apache.org/downloads/
- 다운로드 파일: commons-fileupload-1.3.3-bin.zip, commons-io-2.6-bin.zip
JSP 페이지에 page 디렉티브 태그의 import 속성을 사용하여 패키지 org.apache.commons.fileupload.*를 설정
DiskFileUpload 클래스의 메소드
FileItem 클래스의 메소드
예제1 [Commons-FileUpload를 이용한 파일 업로드]
더보기
fileupload04.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>File Upload</title>
</head>
<body>
<!-- 1. form태그 2. post 3.multipart/form-data 4. file
요청URI : fileupload04_process.jsp
요청파라미터 : {filename=파일객체}
요청방식 : post
-->
<form action="fileupload04_process.jsp" method="post"
enctype="multipart/form-data">
<p>파일 : <input type="file" name="filename"/></p> <!-- name="filename"값이 중요하다 -->
<p><input type="submit" value="파일올리기"/></p>
</form>
</body>
</html>
fileupload04_process.jsp
<%@page import="java.util.UUID"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.io.File"%>
<%@ page import="org.apache.commons.fileupload.FileItem"%>
<%@ page import="java.util.Iterator"%>
<%@ page import="java.util.List"%>
<%@ page import="org.apache.commons.fileupload.DiskFileUpload"%>
<!-- 1. form태그 2. post 3.multipart/form-data 4. file
요청URI : fileupload04_process.jsp
요청파라미터 : {filename=파일객체}
요청방식 : post
-->
<%
//윈도우 경로 : 역슬러시 두개
String path = "c:\\upload";
//commons-fileupload.jar 안에 해달 클래스가 있음
DiskFileUpload upload = new DiskFileUpload();
//업로드 할 파일의 최대크기
upload.setSizeMax(5000000); //5Mbyte
//메모리에 저장할 최대 크기
upload.setSizeThreshold(5*4096); // 5*1024*1024 => 5Mbyte
//업로드할 파일을 임시로 저장할 경로(폴도가 없으면 자동으로 폴더 생성됨)
upload.setRepositoryPath(path);
//요청파라미터 : {filename = 파일객체}
// parse : 구문분석(오류체크), 의미분석, 변환
List items = upload.parseRequest(request);
// 요청 파라미터들을 Iterator(열거) 클래스로 변환
Iterator params = items.iterator();
//요청 파라미터가 없어질때 까지 반복 (1회 반복)
while(params.hasNext()){ //돌다리도 두드려 본 후 돌이 있으면
//FileItem : 1) 일반데이터(text, radio, checkbox...) (0)
// 2) 파일(file) (1)
FileItem item = (FileItem)params.next(); // 그 돌을 밟고 건너자
//isFormField -> true(일반데이터(text, radio, checkbox...)
if(item.isFormField()){
String name = item.getFieldName();
String value = item.getString("UTF-8");
out.print(name + "=" + value + "<br />");
}else { //flase(파일(input type="file")))
//요청파라미터 : {filename = 파일객체} => item
String fileFisldName = item.getFieldName(); //filename
String fileName = item.getName(); //업로드될 파일 명.여수고양이.jpg
//이미지 파일이라면 MIME TYPE : image/jpeg
String contentType = item.getContentType();
long fileSize = item.getSize(); //파일의 크기
//만약 fileName = C:\\Users\\PC-08\\Desktop\\영은\\여수고양이.jpg
// -> 여수고양이.jpg
fileName = fileName.substring(fileName.lastIndexOf("\\")+1);
// 파일명 중복 방지 시작 ///
//java.util.UUID => 랜덤값 생상
UUID uuid = UUID.randomUUID();
//원랭,ㅣ 파일 이름과 구분하기위해 _를 붙임(asd_송찬중.jpg)
fileName = uuid.toString()+"_"+fileName;
// 파일 명 중복 방지 끝...
//계획. c:\\upload\\여수고양이.jpg 로 복사해야함
File file = new File(path + "\\" + fileName);
//복사실행
//파일객체 write(계획)
item.write(file);
out.print("----------------------<br>");
out.print("요청 파라미터 이름 : " + fileFisldName + "<br>");
out.print("저장 파일 이름 : " + fileName + "<br>");
out.print("파일 콘텐츠 유형 : " + contentType + "<br>" );
out.print("파일크기 : " +fileSize);
}
}
%>
</body>
</html>예제2 [Commons-FileUpload를 이용한 파일 업로드 및 정보 출력]
더보기
fileupload05.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<title>File Upload</title>
<script type="text/javascript">
//documemt 내의 모든 요소들이 로딩 된 후 실행
$(function(){
//이미지 미리보기 시작///////
$("input[name='filename']").on("change",handleImg);
//이미지 미리보기 끝///////
});
//(e) onchange 이벤트 객체
function handleImg(e){
console.log("개똥이");
let files = e.target.files; //파일들
//fileArr = {a.jpg , b.jpg}
let fileArr = Array.prototype.slice.call(files);
//f: 파일 오브젝트(a.jpg)
fileArr.forEach(function(f){
//이미지 여부 채킹
if( !f.type.match("image.*")){
alert("이미지만 가능합니다.");
return; //함수 종료
}
//이미지가 맞다면
let reader = new FileReader();
//
reader.onload = function(e){
let img_html ="<img src='" + e.target.result+"' style='width:50%;' />";
// 요소.appen : 누적, 요소.html : 새로고침,
// 요소.innerHTML : javaScript에서 새로고침
$('#pImg').html(img_html);
}
reader.readAsDataURL(f);
});
}
</script>
</head>
<body>
<!-- 1. form태그 2. post 3.multipart/form-data 4. file
요청URI : fileupload04_process.jsp
요청파라미터 : {name=송찬중, subject=고독한미식가, filename=파일객체}
요청방식 : post
-->
<form action="fileupload05_process.jsp" method="post"
enctype="multipart/form-data">
<p>이름 : <input type="text" name="name"/></p><!-- FileItem,isFormField(o) -->
<p>제목 : <input type="text" name="subject"/></p><!-- FileItem,isFormField(o) -->
<p id="pImg"></p>
<p>파일 : <input type="file" name="filename"/></p><!-- FileItem,isFormField(X) -->
<p><input type="submit" value="파일올리기"/></p>
</form>
</body>
</html>
fileupload05_process.jsp
<%@page import="java.util.UUID"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.io.File"%>
<%@ page import="org.apache.commons.fileupload.FileItem"%>
<%@ page import="java.util.Iterator"%>
<%@ page import="java.util.List"%>
<%@ page import="org.apache.commons.fileupload.DiskFileUpload"%>
<!-- 1. form태그 2. post 3.multipart/form-data 4. file
요청URI : fileupload05_process.jsp
요청파라미터 : {filename=파일객체}
요청방식 : post
-->
<%
//윈도우 경로 : 역슬러시 두개
String path = "c:\\upload";
//commons-fileupload.jar 안에 해달 클래스가 있음
DiskFileUpload upload = new DiskFileUpload();
//업로드 할 파일의 최대크기
upload.setSizeMax(5000000); //5Mbyte
//메모리에 저장할 최대 크기
upload.setSizeThreshold(5*4096); // 5*1024*1024 => 5Mbyte
//업로드할 파일을 임시로 저장할 경로(폴도가 없으면 자동으로 폴더 생성됨)
upload.setRepositoryPath(path);
//요청파라미터 : {filename = 파일객체}
// parse : 구문분석(오류체크), 의미분석, 변환
List items = upload.parseRequest(request);
// 요청 파라미터들을 Iterator(열거) 클래스로 변환
Iterator params = items.iterator();
//요청 파라미터가 없어질때 까지 반복 (1회 반복)
while(params.hasNext()){ //돌다리도 두드려 본 후 돌이 있으면
//FileItem : 1) 일반데이터(text, radio, checkbox...) (0)
// 2) 파일(file) (1)
FileItem item = (FileItem)params.next(); // 그 돌을 밟고 건너자
//isFormField -> true(일반데이터(text, radio, checkbox...)
if(item.isFormField()){
//{name=송찬중, subject=고독한미식가, filename=파일객체}
String name = item.getFieldName(); //name, subject
String value = item.getString("UTF-8"); //송찬중,고독한미식가
out.print(name + "=" + value + "<br />");
}else { //flase(파일(input type="file")))
//요청파라미터 : {filename = 파일객체} => item
String fileFisldName = item.getFieldName(); //filename
String fileName = item.getName(); //업로드될 파일 명.여수고양이.jpg
//이미지 파일이라면 MIME TYPE : image/jpeg
String contentType = item.getContentType();
long fileSize = item.getSize(); //파일의 크기
//만약 fileName = C:\\Users\\PC-08\\Desktop\\영은\\여수고양이.jpg
// -> 여수고양이.jpg
fileName = fileName.substring(fileName.lastIndexOf("\\")+1);
// 파일명 중복 방지 시작 ///
//java.util.UUID => 랜덤값 생상
UUID uuid = UUID.randomUUID();
//원랭,ㅣ 파일 이름과 구분하기위해 _를 붙임(asd_송찬중.jpg)
fileName = uuid.toString()+"_"+fileName;
// 파일 명 중복 방지 끝...
//계획. c:\\upload\\여수고양이.jpg 로 복사해야함
File file = new File(path + "\\" + fileName);
//복사실행
//파일객체 write(계획)
item.write(file);
out.print("----------------------<br>");
out.print("요청 파라미터 이름 : " + fileFisldName + "<br>");
out.print("저장 파일 이름 : " + fileName + "<br>");
out.print("파일 콘텐츠 유형 : " + contentType + "<br>" );
out.print("파일크기 : " +fileSize);
}
}
%>
</body>
</html>예제3 [Commons-FileUpload를 이용한 파일 업로드 및 정보 출력]
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<title></title>
<script type="text/javascript">
$(function(){
$('#uploadFile').on("change",handleImg);
});
function handleImg(e){
// e.target : <input type="file" class="custom-file-input" id="uploadFile" name="uploadFile" />
let files = e.target.files;
let fileArr = Array.prototype.slice.call(files);
fileArr.forEach(function(f){
console.log("파일명 : " + f.name);
$(".custom-file-label").html(f.name);
});
}
</script>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script type="text/javascript" src="/js/jquery.min.js"></script>
</head>
<body>
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">로그인</h3>
</div>
<!--
요청URI : fileupload06_process.jsp
요청파라미터 : {memMail=test@test.com,password=java,uploadFile=파일객체,remember-me=on}
요청방식 : post
-->
<form name="frm" action="fileupload06_process.jsp" method="post"
enctype="multipart/form-data">
<div class="card-body">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="memMail" name="memMail"
placeholder="Enter email" required />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password"
required />
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="uploadFile" name="uploadFile" />
<label class="custom-file-label"
for="uploadFile">Choose file</label>
</div>
</div>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="remember-me"
name="remember-me" />
<label class="form-check-label" for="remember-me">
Check me out</label>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</body>
</html>
<%@ page import="java.util.UUID"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.io.File"%>
<%@ page import="org.apache.commons.fileupload.FileItem"%>
<%@ page import="java.util.Iterator"%>
<%@ page import="java.util.List"%>
<%@ page import="org.apache.commons.fileupload.DiskFileUpload"%>
<!-- 1. form태그 2. post 3.multipart/form-data 4. file
요청URI : fileupload04_process.jsp
요청파라미터 : {filename=파일객체}
요청방식 : post
-->
<%
// 윈도우 경로 : 역슬러시 두 개
String path = "c:\\upload";
// commons-fileupload.jar 안에 해당 클래스가 있음
DiskFileUpload upload = new DiskFileUpload();
// 업로드 할 파일의 최대 크기
// upload.setSizeMax(sizeMax);
upload.setSizeMax(5000000); // 5Mbyte
// 메모리에 저장할 최대 크기
// upload.setSizeThreshold(sizeThreshold);
upload.setSizeThreshold(5*4096); // 5*1024*1024 => 5Mbyte
// 업로드할 파일을 임시로 저장할 경로 (폴더가 없으면 자동으로 폴더 생성)
upload.setRepositoryPath(path);
// 요청 파라미터 : {filename=파일객체} // input type = "file"에서 name값
// parse : 구문분석(오류체크), 의미분석, 변환
List items = upload.parseRequest(request);
// 요청 파라미터들을 Iterator(열거) 클래스로 변환
Iterator params = items.iterator();
// 요청 파라미터가 없어질때까지 반복(1회 반복)
while(params.hasNext()){ // 돌다리도 두드려본 후 돌이 있으면
// FileItem : 1) 일반 데이터(text, radio, checkbox..) (0)
// 2) 파일(file) (1)
FileItem item = (FileItem)params.next(); // 그 돌을 밟고 건너자
// 요청파라미터 : request{memMail=test@test.com,password=java,uploadFile=파일객체,remember-me=on}
// isFormField() -> true(1) 일반데이터(text, radio, checkbox,..)
if(item.isFormField()){
//{memMail=test@test.com,password=java,remember-me=on}
// {name=이강인, subject=강인이와 만두}
String name = item.getFieldName(); // name, subject
String value = item.getString("UTF-8"); // 이강인, 강인이와 만두
out.print(name+"="+value+"<br />");
}else{// false(파일(input type="file"))
// 요청파라미터 : {filename=파일객체} => item
String fileFieldName = item.getFieldName(); // filename
String fileName = item.getName(); // 업로드 될 파일명. 이강인.jpg
// 이미지 파일이라면 MIME TYPE : image/jpeg
String contentType = item.getContentType();
long fileSize = item.getSize(); // 파일의 크기
// 만약 fileName => C:\\Users\\BMJ\\Pictures\\iki.jpg
// -> iki.jpg
fileName = fileName.substring(fileName.lastIndexOf("\\")+1);
// 파일명 중복 방지 시작 /////
// java.util.UUID => 랜덤값 생성
UUID uuid = UUID.randomUUID();
fileName = uuid.toString() + "_" + fileName;
// 파일명 중복 방지 끝 /////
// 계획. c:\\upload\\iki.jpg로 복사해야함
File file = new File(path + "\\" + fileName);
// 복사 실행
// 파일객체.write(계획)
item.write(file);
out.print("==============================<br />");
out.print("요청 파라미터 이름 : " + fileFieldName + "<br />");
out.print("저장 파일 이름 : " + fileName + "<br />");
out.print("파일 컨텐츠 유형 : " + contentType + "<br />");
out.print("파일 크기 : " + fileSize + "<br />");
}
}
%>'JSP 웹 프로그래밍 > 수업내용' 카테고리의 다른 글
| [JSP 웹 프로그래밍] 다국어 처리 (0) | 2024.07.10 |
|---|---|
| [JSP 웹 프로그래밍] 유효성 검사 (0) | 2024.07.08 |
| [JSP 웹 프로그래밍] form 태그 / input 태크 / select 태그 / textarea 태그 (0) | 2024.07.03 |
| [JSP 웹 프로그래밍] reponse 내장 객체 (0) | 2024.07.01 |
| [JSP 웹 프로그래밍]내장 객체 예제 2 (0) | 2024.07.01 |
