Spring.파일첨부(file)

첨부방법3가지

-일반 파일 첨부 : Spring으로

 

-Drag & Drop : Javascript이용

 

- 새로운 UI제공하여 업로드 : 보안적인영향으로 많이 사용.

 

 

 

여기서는 가장 보편적이고 기본적이 방식인 Spring으로 FileUpload.

1.

apache Commons를 검색하고 들어가서 FileUpload(1.3.1) 업로드와 IO(2.7)관련하여

두개의 라이브러리 버전을 확인한다.

2.

Maven Repository에 가서 두개의 라이브러리를 찾고 Maven의 코드를 pom.xml의 util부분에 복붙한다.

 

-CommonIO

- Fileuploade

//pom.xml <!-- Util -->
<dependency>
  <groupId>commons-io</groupId>
  <artifactId>commons-io</artifactId>
  <version>2.7</version>
</dependency>
<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.3.1</version>
</dependency>
<dependency>

 

3.

그림파일을 넣고자 하는 jsp파일에 form태그에 enctype="multipart/form-data"를 추가해준다.

 

 *form태그의 속성*

- action은 전송 목적지 - method는 전송 방식.

- enctype은 전송되는 데이터 형식을 설정. method가 post인 경우에만 사용가능하다.

//write.jsp
<form action="/product/write" method="post" enctype="multipart/form-data">

 

4.

Servlet-context에 Resolver 추가한다.

Servlet-context에 다음과 같이 Resolver를 등록해주고 한번에 올릴 수 있는 파일의 맥시멈 크기를 정해준다.

//servlet-context
<beans:bean id="multipartResolver" 
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<beans:property name="maxUploadSize" value="5242880"></beans:property>
</beans:bean>

*참고사항

<Beans></Beans><Bean></Beans> 이렇게 쓰면 버전도 명시해줘야함.

<beans:bean></beans:bean> 이렇게 쓰면 버전을 명시해주지 않아도됌.

5.

내 spring폴더에 upimg이름으로 저장소를 만들고

servlet-context에 <resources></resources>를 이용하여 location과 mapping을 지정해준다.

<resources location="file:///C:/_web/_spring/upimg/" mapping="/images/**"></resources>
//리눅스의 경우 C:를 빼주면됌.

 

이렇게 따로 폴더를 만들어주면 많은 파일로 인해 프로젝트 자체가 무거워져서

배포시에 생길 수 있는 문제를 사전에 예방할 수 있다.

6.

servlet-context.xml에 util폴더 루트를 잡아준다.

com.myweb.util

//servlet-context.xml
<context:component-scan base-package="com.myweb.util"/>

7.

com.myweb.util폴더에 FileProcessor.java 클래스를 만들어준다.

데이터 송신의 기본은 String이다.

따라서 이 클래스 에서는 이미지의 객체 데이터를 다른 데이터들과 함께 받아서

객체인 이미지가 전달될 수 있게 이미지의 이름을 String형태로 뽑아 주는 작업을 해주는 클래스이다.

8.

중복되는 경우의 해결방법

- 중복되는걸 처리해주는거

해시를 사용 : Spring에서는 uniqueuserinterface를 제공한다.

이게 바로 uuid이다.

9.

생각의 생각(신호처리)

 

-파일이 있을때

 새로운 이미지 넣고 기존이미지 삭제하는 경우(modSign==2)/ 이미지 안 넣고 기존이미지 쓰는경우(modSign==0)

/안넣고 기본이미지 삭제하는 경우(modSign==1)

-파일이 없을때

파일등록안하는경우/파일등록하는경우

 

 

기존이미지가 존재하는 경우 새로운 이미지를 등록하고 기존이미지를 삭제하는 로직.

try {
	imgfileObj.transferTo(fileObj);
	imgfileName = saveFileName;
	//예전이미지 파일 지우는 로직
	//File oldFileObj = new File(filePath+old_imgfileName);//oldFileObj.delete();				
	  if(!old_imgfileName.equals("NONE")) {
	  //기존이미지 파일이 있는경우
	  new File(filePath+old_imgfileName).delete();	
	  }							
	  } catch (IllegalStateException | IOException e) {
		log.info(">>>File Save Fail");
		e.printStackTrace();
	  }

 

수정페이지에 가서 수정시 이미지는 건들이지 않고 submit할 때, 이미지를 그대로 쓸 것인가 버릴 것인가에 대한 로직짜기

 

hidden값 사용하기

<script>
$(function()({
	$("#modSubmit").on("click",function(e){
		e.preventDefault();
		let imgfileName = $("input[type=file]").val();
			let hiddenVal = '<input type="hidden" id="hidVal" name="delImg" val="">';
			$("form").prepend(hiddenVal).trigger("create");
		if(imgfileName ==''){
			let isOk = confirm("첨부파일 진짜 지울래잉?");
			isOk == true? $(document).find("#hidVal").val("1") : $(document).find("#hidVal").val("0");
		}else {
		  $(document).find("#hidVal").val("2");			
		}
		$("form").submit();
	});
});
</script>

10.

삭제

1. pno값을 던져서 가져와서 remove

2. formtag를 get에서 post로 바꿔서 hidden사용 - 더많이 사용함.