collection 사용 X part만 사용 - multiple로 받는 버전 : https://dev-eunse.tistory.com/179
👀
enctype="multipart/form-data" : 미작성시 file 절~대 안날라감
=> 직접 해보니 해당방법으로 3번 - 마크업만 바꾸면 동일하게 저장이 된다!
여러개의 첨부파일 전송 형태 ( Front-end와 소통으로 전송방식이 변경 됨 )
1. name값은 전부 다르고, 순차적으로 전송하는 방식
2. name값을 동일하게 전송하는 방식 요고루 해볼거임
3. multiple을 이용해서 전송하는 방식( <input type=" file " multiple=" multiple">한번에 여러개의 파일을 받는 형태 )
( 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⚡ 받은파일을 받아서 실제 디렉토리에 저장
🔽
=> 확장자만 가져와서 파일명:(날짜-번호)로 저장 : 절대 파일명 중복 방지
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
'CLASS > JSP' 카테고리의 다른 글
#4-4 / input type file-multiple을 사용할 경우(part) (0) | 2024.06.27 |
---|---|
#4-3 / 파일 업로드(stream) (0) | 2024.06.27 |
#4-1 / 상품 등록 및 삭제 (0) | 2024.06.27 |
#3-3 / 2예제 paging 기능 추가 (0) | 2024.06.26 |
#3-2 / 2예제 고객정보 수정페이지(update) (0) | 2024.06.26 |