스프링에서는 MultipartFile 객체를 제공한다
1. 라이브러리 설정
- 파일 업로드를 위한 MultipartResolver 구현체 라이브러리 등록
-> maven repository에서 라이브러리
( commons-fileupload ) 검색 후 아파치 pom 추가
2. Bean 등록 + 설정
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="104857600" />
<property name="maxUploadSizePerFile" value="104857600" />
<property name="maxInMemorySize" value="104857600" />
</bean>
/*
maxUploadSize : 한 요청당 허용되는 최대 용량(byte 단위) - 무제한은 -1
maxUploadSizePerFile : 한 파일당 허용되는 최대 용량(byte단위) , 무제한은 -1
maxInMemorySize : 디스크에 저장되지 않고 메모리에 유지하도록 허용하는 바이트 단위
지정된 용량을 초과할 경우 자동으로 파일이 저장된다
메모리가 파일을 기억해놨다가 mULTIPARTrESOLVER 이용해서 DB 수행하고 와도
메모리에 파일이 있음, DB삽입 성공 시 메모리에서 꺼내서 파일로 저장
기본값 : 10240 byte (10KB)
104857600 = 100MB
*/
3. 파라미터로 받기
List<MultipartFile> "input태그 name"
으로 리스트로 받아낼 수 있다
(servers 에서 module 체크해야 서버와 실제 경로가 일치한다)
--> 파일이 업로드 안됐어도 모두 전송되므로 파일 존재 여부를 체크하고 존재하는 파일만 다시 list를 담아야한다
--list 새로 생성해서 MutipartResolver에서
실제 이미지 담겨있는것만 분별+ DB에 필요한 것만 for문으로 추출
!imgList.isEmpry() = true 면 이미지 삽입 [Mybatis 반복삽입진행 ]
4. 이미지 리스드 DB 삽입
String webPath
= "/resources/images/board/"; //DB에 저장되는 경로
String reaPath
= session.getServletContext().getRealPath(WebPath); // 실제 물리경로
< mapper >
<insert id="insertImgList" parameterType="list">
INSERT INTO BOARD_IMG
SELECT SEQ_IMG_NO.NEXTVAL, A.* FROM
<foreach collection="list" item="img"
open="(" close=") A" separator=" UNION ALL ">
SELECT
#{img.imgPath} IMG_PATH ,
#{img.imgName} IMG_NM,
#{img.imgOriginal} IMG_ORIGINAL,
#{img.imgLevel} IMG_LEVEL,
#{img.boardNo} BOARD_NO
FROM DUAL
</foreach>
</insert>
<!-- 동적 SQL : 마이바티스의 기능으로 SQL 수행 중 조건, 반복, 특정 구문 추가 등을 동적으로 수행할 수 있음. -->
<!-- <forEach> 태그
- collection : 반복 접근할 컬렉션 형태의 파라미터
- item : collection에서 반복 시 마다 순차적으로 하나씩 접근한 요소
- index : 현재 반복 인덱스
- open : forEach 시작 전 추가할 구문
- close : forEach 종료 후 추가할 구문
- separator : 반복 시 마다 SQL 사이에 추가할 구분자
-->
+ 5. 이미지 업로드시 미리보기 출력 (JS)
//파일 올라가있는지 check
const filecheck = [0 , 0 , 0 , 0 , 0];
//이미지 영역 클릭시 파일첨부창 뜨도록
$(".images").on("click", function(){
var index = $(".images").index(this);
if(filecheck[index]==0){
$("input[name=images]").eq(index).click()
}
else{
if(confirm("이미지를 삭제하시겠습니까?")){
$(this).children("img").removeAttr("src");
$(this).children("img").css("display","none");
$("input[name=images]").eq(index).val("");
filecheck[index]=0;
}
}
})
//이미지 첨부되면 미리보기 뜨도록
$("input[name=images]").on("input",function(){
var index = $("input[name=images]").index(this);
if(this.files[0]){
console.log("done"+index);
filecheck[index]=1;
console.log(filecheck[index]);
var reader = new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onload = function(e){
$(".images").eq(index).children("img").attr("src", e.target.result);
$(".images").eq(index).children("img").css("display", "block");
}
}
})