기록하고 기억하는 블로그

스프링에서는 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");
			}
		}
	})