예제 1 - 파일업로드
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>
<p><input type="submit" value="파일올리기" /></p>
</form>
</body>
</html>fileupload04_process.jsp
<%@ 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";
String path2 = "c:\\upload2";
//commons-fileupload.jar 안에 해당 클래스가 있음
DiskFileUpload upload = new DiskFileUpload();
// 업로드 할 파일 크기의 최대 크기
upload.setSizeMax(5000000); //5Mbyte
// 메모리에 저장할 최대 크기
upload.setSizeThreshold(5*4096); // 5 * 1024 * 1024
// 업로드할 파일을 임시로 저장할 경로(폴더가 없으면 자동으로 폴더가 생성됨 mkdir()으로 생성하지 않아도됨)
upload.setRepositoryPath(path);
// 요청 파라미터 : {filename=파일객체}
// parse : 구문분석(오류체크), 의미분석, 변환
List items = upload.parseRequest(request);
// 요청 파라미터 들을 Iterator(열거) 클래스로 변환
Iterator params = items.iterator();
// 요청 파라미터가 없어질 때 까지 반복
while(params.hasNext()){
// FileItem : 일반데이터(text, radio, checkbox)
// 파일(file)
FileItem item = (FileItem) params.next();
//isFormField() > true > 일반데이터
if(!item.isFormField()){// 파일(input type="file")
// 요청 파라미터 : {filename=파일객체} => item
String fileFieldName = item.getFieldName(); // filename
String fileName = item.getName(); // 업로드 될 파일 명(경로 포함)
fileName = fileName.substring(fileName.lastIndexOf("\\")+1); // 경로 삭제
// 이미지파일이라면 MIME TYPE : image/jpg
String contentType = item.getContentType();
long fileSize = item.getSize(); //파일의 크기
// c:\\upload\\사진.jpg로 복사
File file = new File(path, fileName);
// 복사 실행
item.write(file);
out.print("================<br />");
out.print("요청 파라미터 이름 : "+fileFieldName+"<br />");
out.print("저장 파일 이름 : "+fileName+"<br />");
out.print("파일 콘텐트 유형 : "+contentType+"<br />");
out.print("파일 크기 : "+fileSize+"<br />");
}
}
%>예제2 - 파일 업로드 + 사진 출력
fileupload05.jsp
JS내 에서 파일에서 사진이 올라간 경우 미리보기만들어주는 법
- 파일가져옴 (붙어있는 형식)
- file버튼.files
- 파일을 배열로 변환
- Array.prototype.slice.call(files로 가져온 변수)
- 파일 여부 체크하기
- 변수.type.match("image.*")
- 이미지 가져오기
- new FileReader()
- reader.onload = function(e){
e.target.result
}
- 파일이나 Blob 객체의 내용을 읽어 Data URL 형태로 변환하는 역할
- reader객체.readAsDataURL(변수)
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="/js/jquery.min.js"></script>
<script>
$(function(){
$('input:file').on('input',handleImg);
})
// e 이벤트 객체
function handleImg(e){
let files = e.target.files; // 파일에 접근
let fileArr = Array.prototype.slice.call(files); // 붙어있는 파일을 배열로 정렬
$.each(fileArr, function(){
// 이미지 여부 체크
if(!this.type.match("image.*")){
console.log("이미지가 아닙니다")
return;
}
// 이미지
let reader = new FileReader();
// e : reader가 이미지 객체를 읽는 이벤트
reader.onload = function(e){
let img_html = "<img src='"+e.target.result+"' style='width:50%;' />";
// 요소.append : 누적, 요소.html : 새로고침,
// 요소.innerHTML : JavaScript에서 새로고침
$('#pImg').html(img_html);
}
reader.readAsDataURL(this);
});
}
</script>
<title>File Upload</title>
</head>
<body>
<!-- 1. form태그 2. post 3.multipart/form-data 4. file
요청URI : fileupload04_process.jsp
요청파라미터 : {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>
<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 : fileupload04_process.jsp
요청파라미터 : {filename=파일객체}
요청방식 : post
-->
<%
//윈도우 경로 : 역슬러시 두 개
String path = "c:\\upload";
String path2 = "c:\\upload2";
//commons-fileupload.jar 안에 해당 클래스가 있음
DiskFileUpload upload = new DiskFileUpload();
// 업로드 할 파일 크기의 최대 크기
upload.setSizeMax(5000000); //5Mbyte
// 메모리에 저장할 최대 크기
upload.setSizeThreshold(5*4096); // 5 * 1024 * 1024
// 업로드할 파일을 임시로 저장할 경로(폴더가 없으면 자동으로 폴더가 생성됨 mkdir()으로 생성하지 않아도됨)
upload.setRepositoryPath(path);
// 요청 파라미터 : {filename=파일객체}
// parse : 구문분석(오류체크), 의미분석, 변환
List items = upload.parseRequest(request);
// 요청 파라미터 들을 Iterator(열거) 클래스로 변환
Iterator params = items.iterator();
// 요청 파라미터가 없어질 때 까지 반복
while(params.hasNext()){
// FileItem : 일반데이터(text, radio, checkbox)
// 파일(file)
FileItem item = (FileItem) params.next();
//isFormField() > true > 일반데이터
if(!item.isFormField()){// 파일(input type="file")
// 요청 파라미터 : {filename=파일객체} => item
String fileFieldName = item.getFieldName(); // filename
String fileName = item.getName(); // 업로드 될 파일 명(경로 포함)
fileName = fileName.substring(fileName.lastIndexOf("\\")+1); // 경로 삭제
// 이미지파일이라면 MIME TYPE : image/jpg
String contentType = item.getContentType();
long fileSize = item.getSize(); //파일의 크기
// 파일이 이미 있으면 already exists: 오류 발생
//파일명 중복 방지 시작
UUID uuid = UUID.randomUUID();
fileName = uuid.toString() + "_" +fileName;
// c:\\upload\\사진.jpg로 복사
File file = new File(path, fileName);
// 복사 실행
item.write(file);
out.print("================<br />");
out.print("요청 파라미터 이름 : "+fileFieldName+"<br />");
out.print("저장 파일 이름 : "+fileName+"<br />");
out.print("파일 콘텐트 유형 : "+contentType+"<br />");
out.print("파일 크기 : "+fileSize+"<br />");
} else{
String name = item.getFieldName();
String value = item.getString("UTF-8"); // 한글 처리
out.print(name+ " : "+value+"<br/>");
}
}
%>'JAVA > JSP_Spring' 카테고리의 다른 글
| 구현 4 - 이미지 추가 (0) | 2024.07.05 |
|---|---|
| [JSP] 구현 3 - 상품 추가 (0) | 2024.07.03 |
| [JSP] form 태그 (0) | 2024.07.02 |
| [JSP] 구현 2 - 상세보기 (1) | 2024.07.02 |
| [JSP] 내장 객체 (0) | 2024.06.28 |
