본문 바로가기
CLASS/JSP

#4-2 / 첨부파일 여러개 업로드시 사용법

by hingu 2024. 6. 27.

collection 사용 X part만 사용 - multiple로 받는 버전 : https://dev-eunse.tistory.com/179

👀 

enctype="multipart/form-data"  : 미작성시 file 절~대 안날라감

여러개의 첨부파일 전송 형태 ( Front-end와 소통으로 전송방식이 변경 됨 )
1. name값은 전부 다르고, 순차적으로 전송하는 방식
2. name값을 동일하게 전송하는 방식 요고루 해볼거임
3. multiple을 이용해서 전송하는 방식( <input type=" file " multiple=" multiple">한번에 여러개의 파일을 받는 형태 )

=> 직접 해보니 해당방법으로 3번 - 마크업만 바꾸면 동일하게 저장이 된다!
      ( multiple 사용시 갯수 제한 :
        front에서 js로 핸들링 - 해당 element[0].files.lengthnode[0].files.length
        backend도 가능 )

 input으로 첨부파일 입력받는 파트
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>멀티 첨부파일 사용법</title>
</head>
<body>
	<form id="frm" enctype="multipart/form-data">
    		<!--첨부파일1 : <input type="file" name="mfile" multiple="multiple">얘도 가능-->
		첨부파일1 : <input type="file" name="mfile"><br><br>
		첨부파일2 : <input type="file" name="mfile"><br><br>
		첨부파일3 : <input type="file" name="mfile"><br><br>
		<input type="button" value="전송" onclick="fileup()">
	</form>
</body>
<script>
	function fileup(){
		var node = document.getElementsByName("mfile");
		var w=0;
		var count=0;
		while(w<node.length){
			if(node[w].value != ""){ //입력된 값이 있을때
				count++;	
			}
			w++;
		}
		
		if(count<=0){
			alert("첨부파일을 한개 이상 추가해주셔야합니다");
		}else{
			//사실은 용량체크도 다 해야함
			frm.method="post";
			frm.action="./jsp14.do";
			frm.submit();
		}
	}
</script>
</html>


원래는 script로 용량체크도 해야함!  https://dev-eunse.tistory.com/155

3개 받음


🔽 

받은파일을 받아서 실제 디렉토리에 저장
=> 확장자만 가져와서 파일명:(날짜-번호)로 저장 : 절대 파일명 중복 방지


MultipartConfig가 jsp에서는 까다로움.. 
=> jsp만으로 file형태 받기 불가(사실 라이브러리 사용하면 가능은 함..) do파일(.java)로 전송

Part : multipart/form-data형태로 전송된 POST요청의 항목 데이터를 다루는 기능들이 정의된 인터페이스
Collection : data배열(=byte배열),여러개의 파일을 받을때 사용
request.getParts() : html속성중 type="files"는 모두 가져옴

첨부파일이 여러개일 경우
JSF (Java Collection Framework) 형태로 사용 : Collection을 사용해서...
package shop;

@MultipartConfig(
	fileSizeThreshold = 1024*1024*2,
	maxFileSize = 1024*1024*5,
	maxRequestSize = 1024*1024*100
)
public class jsp14 extends HttpServlet {
	private static final long serialVersionUID = 1L;
	RequestDispatcher rd = null;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		
		//Part 자료형을 이용하여 각각의 파일을 클래스 배열로 첨부
		Collection<Part> files = request.getParts();  
		ArrayList<Part> ap = new ArrayList<Part>(files.size());
		
		for(Part p : files) { //반복문 사용 - 배열이라서
			ap.add(p);
			//sysout 확인해볼 시 이렇게 입력
			//System.out.println(ap.get(idx).getSubmittedFileName());
		}
		
		//웹경로 - 저장할 위치
		String url = request.getServletContext().getRealPath("/upload/");
		String filename ="";
		String today = "";
		int rnd = 0; //random - 시분초를 넣어도 중복될수 있음을 방지
		SimpleDateFormat df = new SimpleDateFormat("yymmddHms");
		int w=0;
		while(w<ap.size()) {
			Date dt = new Date();
			today = df.format(dt); //날짜+시간
			rnd = (int)Math.ceil(Math.random()*100); //랜덤숫자 1~100
			filename = ap.get(w).getSubmittedFileName(); //실제파일명
			
			int dot = filename.lastIndexOf(".");
			String rename = filename.substring(dot+1); //속성명만 출력
			String fullname = today + "_" + String.valueOf(rnd) +"." + rename;
			
			if(filename!= "") {
				ap.get(w).write(url + fullname);				
			}
			
			w++;
		}
		
		//배열 정리
		files.clear();
		ap.clear();

		//jsp에서는 업로드 된 파일에 대한 리스트 출력
		this.rd = request.getRequestDispatcher("./jsp14.jsp");
		this.rd.forward(request, response);
	}
}


🔽 

⚡ jsp 파일에 출력

<%@page import="java.io.File"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String url = request.getRealPath("/upload/");
File flist = new File(url);

String filename[] = flist.list(); //배열로 받아야함

for(String nm : filename){
	out.print(nm+"<br>");
}
%>​

 

실제 디렉토리에도 저장 완

 

 

👀  주의 
사용자가 볼때는 본인이 갖고있던 파일명으로 보이지만

실제로 저장되는 파일명은 날짜_랜덤 형식

24402714407_50.png : 실제 저장된 파일
맛있는치즈.png : DB에 저장될 이름

data설계시
mfile_org varchar(200) null  =>  맛있는치즈.jpg
mfile_url text null => ./upload/24402714407_50.png