24일 차 특이사항
1. 게시판 이미지 업로드 기능 구현중
2. 파일 1개 첨부하는 방법, 2개 이상 첨부하는 방법 코드 시도
의문점
1. multipart ? 이건 왜 쓰는 걸까?
<!-- 파일 업로드에서는 enctype(인코딩타입)을 multipart/form-data로 반드시 설정 -->
<form action="upload_ok" method="post" enctype="multipart/form-data">
파일 선택 : <input type="file" name="file">
<input type="submit" value="전송">
</form>
</br>
<!-- 파일 두개이상 -->
<form action="upload_ok2" method="post" enctype="multipart/form-data">
파일 선택 : <input type="file" multiple="multiple" name="files">
<input type="submit" value="전송">
</form>2. VO를 만들었는데 사용하지 않고 있다. 꼭 만들어야 하는가?
3.UUID는 무엇이지? 랜덤 하게 이름을 만든다. 업로드 시 파일명이 같으면 복사가 되지 않기 때문이다.
UUID uuid = UUID.randomUUID();
System.out.println(uuid.toString());
String[] uuids = uuid.toString().split("-");
파일업로드 개념
1. drive가 다르면 파일이 복사된다. 복사하는 개념이다.
2. 다른 사람 컴퓨터로 보내면 복사된다.
3. 카톡 서버에 파일이 복사되서 올라간다.
4. 드라이브는 저장소다.
5. 그냥 저장되는 것은 아니다.
6. 똑같은 폴더명으로 저장할 수 없다.
7. 파일을 폴더 쪽으로 복사할 때는 저장용 이름을 따로 가진다.
8. 원본 파일은 그대로 있고 UUID를 사용해서 랜덤으로 이름을 붙여줄 수 있다.
9. 파일을 처음 만들면 껍데기부터 만들어진다. 내용 채우고, 확장자를 정한다.
10. 파일은 하나씩 생성된다. 첨부 여러 개 하려면 for문을 사용해서 하나씩 만들어주는 과정이 들어가야 된다.
11. 파일이 db에 insert 개수만큼 되어야 한다.
12. 단일파일 업로드와 다중파일 업로드
13. 지금하고 있는 것은 단일 여러개다.
14. <input type=file> 배열로 저장된다. files [0] 이렇게 배열로 표시해 줘야 인식이 가능하다. file은 배열이다.
15. name을 다르게 주는 경우가 많다.
16. 개발은 누가봐도 단순하게 짜는 게 중요하다. 동작은 정확히, 이해는 쉽게 되도록 만들어야 한다.
17. 내 pc에 파일이 있는데 브라우저에 첨부하면 server에 저장된다.
해야 할 일
1. 글쓰기 insert 안에 이미지 insert를 또 만들어주면 된다.
2. mapper를 만들고 service, dao를 만든다.
db 업로드 제외 코드
1) Controller
private static final String FILE_PATH = "C:/Users/tmdgh/Desktop/이미지업로드용/";
// 글쓰기
@RequestMapping("insert")
public String insert(@RequestParam Map<String, Object> map, HttpServletRequest request,
MultipartHttpServletRequest mReq) throws IllegalStateException, IOException {
int insert = service.insert(map);
//MultipartFile mFile = mReq.getFile(null); // 1개
//List<MultipartFile>mlist = mReq.getFiles(null); // 다중일 때 혹은 단일 여러개인데 name이 같을 때
Iterator<String> itr = mReq.getFileNames(); // 단일 여러개
while (itr.hasNext()) {
MultipartFile mFile = mReq.getFile(itr.next());
String oriName = mFile.getOriginalFilename();
String saveName = System.currentTimeMillis() + "_" + oriName;
mFile.transferTo(new File(FILE_PATH + saveName));
Map<String, Object> fileMap = new HashMap<String, Object>();
fileMap.put("oriName", oriName);
fileMap.put("saveName", saveName);
fileMap.put("FILE_PATH", FILE_PATH);
//int fileInsert = sqlSession.insert("mapper.fileInsert", fileMap);
System.out.println("itr에 뭐들었나 :" + itr);
System.out.println("fileMap에 뭐들었나 :" + fileMap);
//System.out.println("fileInsert에 뭐들었나 :" + fileInsert);
}
return "redirect:list";
}
2) jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
$(function(){
$("#regBtn").click(function(){
$("#frm").attr("action","insert").attr("method","post").submit();
})
$("#uptBtn").click(function(){
$("#frm").attr("action","update").attr("method","post").submit();
})
})
</script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<form name = "frm" id = "frm" enctype="multipart/form-data">
<input type = "hidden" name = "seq" id = "seq" value = "${detail.seq}"><br>
작성자 : <input type = "text" name = "name" id = "name" value = "${detail.name}"><br>
아이디 : <input type = "text" name = "id" id = "id" value = "${detail.id}"><br>
제목 : <input type = "text" name = "subject" id = "subject" value = "${detail.subject}"><br>
내용 : <br>
<textarea rows="10" cols="40" name = "content" id = "content">${detail.content}</textarea>
<br>
<c:if test="${empty detail }">
<input type = "button" name = "regBtn" id = "regBtn" value = "등록">
</c:if>
<c:if test="${not empty detail }">
<input type = "button" name = "uptBtn" id = "uptBtn" value = "수정">
</c:if>
<div>
<input type = "file" name = "file1" id = "file1" value="이미지등록1">
<input type = "file" name = "file2" id = "file2" value="이미지등록2">
</div>
</form>
</body>
</html>
'일경험' 카테고리의 다른 글
| [국민취업지원제도 일경험프로그램 26일차] 게시판 업로드 기능 완료, 게시판 첨부파일 다운로드 기능 구현 시작 (0) | 2023.09.06 |
|---|---|
| [국민취업지원제도 일경험프로그램 25일차] 게시판 이미지 첨부 버튼, 이미지 픽셀 유효성 검사 (0) | 2023.09.05 |
| [국민취업지원제도 일경험프로그램 23일차] 게시판 이미지 업로드 시작 (0) | 2023.09.01 |
| [국민취업지원제도 일경험프로그램 22일차] JSTL이란 무엇인가? (0) | 2023.08.31 |
| [국민취업지원제도 일경험프로그램 21일차] 게시판 검색, 페이징 비동기 방식 (0) | 2023.08.30 |
