1.guupload - 예제 설치

gu-upload는 HTML5 기반으로 파일을 업로드하는 JavaScript 라이브러리이다.

여기서는 gu-upload를 사용하는 예제 설치 방법을 설명한다.

먼저, Eclipse에서 다음 주소로 github 소스를 다운로드 받는다.

https://github.com/gujc71/guupload_sample.git

예제 소스는 JDK 1.7, Spring 4, Maven 환경에서 작성되었다.

gu-upload는 JavaScript 라이브러리이기 때문에

서버는 Struts, PHP, 닷넷(.NET) 등 무엇이든 관계 없지만 

개인적인 편의로 Java Spring 기반으로 예제를 작성하였다.

프로젝트를 Eclipse Tomcat에 추가 해서 실행한 후

다음과 같이 웹브라우저로 접속하면 데모 화면을 볼 수 있다.

http://localhost:8080/guupload/

예제는 게시판(자료실) 글 등록 화면처럼 구성하였다.

먼저, 예제 1은 IE 9 이하(호환성 모드)의 웹 브라우저에서 실행되는 것으로 예제는 IE8로 지정하였다.

<meta http-equiv="X-UA-Compatible" content="IE=8" />

내부적으로는 SWFUpload가 실행 된다.

예제 2는 IE 10 이상이나 Firefox, Chrome등(HTML 5)에서 실행되는 것으로

Gu-Upload의 List모드가 실행된 예제이다.

탐색기에서 파일을 끌어다 놓을 수 있다(Drag & Drop).

예제 3은 Gu-Upload의 Thumbnail모드가 실행된 예제이다.

이미지를 첨부한 경우 미리보기를 할 수 있다.

Submit 버튼을 눌러 서버로 파일을 전송해서 저장하려면

Upload.java 파일에 설정된 저장 경로를 수정해야 한다.

기본으로 D 드라이브가 지정되어 있으니 자신의 디렉터리에 맞추어 수정해야 한다.

   @RequestMapping(value = "/upload")
    public void upload(HttpServletResponse response, HttpServletRequest request, @RequestParam("Filedata") MultipartFile Filedata) {
           SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
           String newfilename = df.format(new Date()) + Integer.toString((int) (Math.random()*10));
          
           File f = new File("d:\\" + newfilename);
           try {
               Filedata.transferTo(f);
               response.getWriter().write(newfilename);
           } catch (IllegalStateException | IOException e) {
               e.printStackTrace();
           }
    }

guupload_sample\src\main\java\gu\Upload.java

업로드 컨트롤에서는 날자와 시간으로 파일을 저장한다.

파일 확장자가 없이 새로운 이름으로 저장되는데

보안을 위해 실제 파일명(realname), 파일명(filename)을 구분하여 처리하기 때문이다.

자세한 내용은 블로그의 자료실 관련 내용을 참고하면 된다.

Submit 버튼을 누르면 upload_save.jsp 가 실행되어

서버로 전송된 값을 확인할 수 있다.

서버로 전송된 값은

파일명(filename), 실제 서버에 저장한 파일명(realname), 파일 크기(filesize) 이다.