[JSP_Servlet] 서블릿 방식 파일 업로드

1.     업로드폼을 만든후 파일 이름을 주고, 파일을 선택하여 전송을 누르면 톰캣 경로에 저장시키고, 다음 jsp파일을 지정하여 업로드한 파일을 뿌려보자.

2.    밑의 경로는 톰캣에 저장되는 경로이다. 이것을 알 수 있는 코드도 짜보자.

 

1.     업로드 form 생성

2.     Form action : 서블릿명.

3.     Enctype=”multipart/form-data” : 일반적인 form submit은 form안의 element들이 name으로 submit된다. 이때 파일을 서버에 저장시키기 위해서는 요놈을 써줘야한다.

4.     Div id=target은 미리보기를 위한 div

5.     Application.getRealPath : : jsp내장객체(표현식에 선언하지 않고 사용 가능한 변수, jsp가 서블릿으로 변환될 때 제공하는 특수한 레퍼런스 타입의 변수)로 웹어플리케이션의 설정 정보를 갖는 context와 관련이 있는 객체로, 웹어플리케이션과 연관이 있다. getRealPath를 통하여 웹어플리케이션 시스템상의 경로로 변경하여 리턴한다.

화면의 하단의 경로가 이놈이다. “/upload는 안써줘도 무방하다. 이클립스에서 톰캣에 저장시키는 임시경로를 보여준다.(추후 server.xml, context.xml에서 변경해줄 수 있다.)

 

1.     Change : 파일이 바뀌었을 때의 함수(똑같은놈을 계속올리는 클릭 방지)

2.     Ext : 확장자명을 받기위해 존재한다.

3.     Pop() : 배열의 마지막 요소를 삭제한 후 그 값을 리턴한다. 즉, 파일명이 jimin.jpg라면 .으로 자른(split) 후 마지막요소 jpg만 삭제한 후 리턴(아래사진참조)

4.     toLowerCase() : 문자열에 있는 모든 영문자를 소문자로 변환한다.

5.     Jquery inArray(찾을 value, [대상배열]) 요소가 없을 경우 -1을 반환

6.     resetFormElement : 폼초기화 함수 올린파일을 초기화시켜버린다.(this : 즉 #file)

7.     Prop(“files”)[0] : 파일리스트(배열) 중 [0] 첫번째인놈(아래아래사진참조)

8.     Window.URL.createObjectURL : 웹페이지는 컴퓨터에 저장된 파일을 강제로 들고 올 수 없다. 하지만, 사용자가 직접 웹페이지 위에 올린 파일이라면 접근할 수 있다. 가상의 url을 만들어 준다.

9.     #target img : target id의 img라는 자식의 src 요소중 src에 url을 넣고 css 변경

10.   그 후 sumit 클릭시 fileUpload servlet으로 이동함.

 

 

 

1.     어노테이션 webServlet 호출, 파일업로드를 받는 서블릿은 multipartConfig어노테이션을 생성하여, 파일사이즈, 경로(jsp에서 application.getRealpath를통해 얻은경로)를 지정한다.

2.     post방식으로 보냈기에 post메서드 집중.

3.     Part : multipart/form-data 형식으로 전송된 데이터는 request.getParameter와 같은 메서드로 접근할 수 없으며, servlet 3.0에 새롭게 추가된 Part 인터페이스를 사용해서 접근해야 한다.

4.     Part.getHeader(“content-disposition”) : header::form-data; name="file"; filename="jimin4.jpg" 요런 형태로 해당 파트의 content-Disposition 헤더의 값으로부터 업로드한 파일의 이름을 구할 수 있다.

5.     startWith : split으로 ;로 자른 후 시작, fileName으로 시작하는 것만 true를 반환하므로 fileName일 때만 if문이 발동한다.

6.     indexOf : 문자열(filename="jimin4.jpg")을 substring 자르는데,(=부터) +1 다음 > 즉 indexOf는 0부터 String형을 인수번째 문자열을 읽어낸다. 때문에 =이 8번째 +1이 9번째로 먹힌다. 역슬래쉬 특수문자(“)를 구분해내기 위해 사용한다. 즉 4번의 fileName에서 “기호를 없애준다. 깔끔한 파일명만 남는다.

7.     Part.write(fileName) : 업로드한 데이터를 fileName에 복사한다.

8.   URLEncoder.encode(“” “”) : url 뒤에 데이터를 덧붙이고자 할 때 스트링을 URL에 맞게 인코딩을 해줘야한다.