2. gu-upload

2019 년에 기능을 보강하면서 문서를 새로 작성하였습니다.

새로운 내용을 참고하세요.

---

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

IE10 이상이나 Firefox, Chrome등 에서 작동한다.

IE9 이하에서는 SWFUpload를 이용하였다.

js 폴더에 있는 guupload 폴더를 복사해서 사용하거나

github에서 다운받아 사용하고자 하는 폴더에 복사한다.

개발하는 자신의 웹 페이지의 Head에

다음과 같이 CSS와 JavaScript를 포함한다.

<link rel="stylesheet" type="text/css" href="js/guupload/css/guupload.css"/>

<script type="text/javascript" src="js/guupload/guUploadManager.js"></script>

guupload를 복사할 경로를 설정해 줘야 한다.

예제에서는 js 폴더 하위에 있기 때문에

위 코드와 같이 각 경로가 js로 시작하고 있다.

웹 페이지 실행이 완료되면(window.onload)

guUploadManager를 생성하도록(new) 한다.

guUploadManager는 화면 구성과

웹 브라우저에 따라 guuplaod, swfupload를 실행하도록 하는 역할 등을 한다.

<script type="text/javascript">
var guManager=null;

window.onload = function() {
    var option = {
            listtype: "thumbnail",
            fileid: "guupload",
            uploadURL: "upload",
            form: document.form1
    }
    guManager = new guUploadManager(option);
}   

function formSubmit(){
    guManager.uploadFiles();
}
</script>

~~ 생략 ~~

        <tr>
            <td>Attach File</td>
            <td>
                <div id="guupload" class="guupload" style="width: 500px; height: 120px;">
                </div>
            </td>
        </tr>

생성시 파라미터는 listtype, fileid, uploadURL, form 4가지가 JSON 형태로 제공되어야 한다.

먼저 listtype은 파일 리스트 방식을 선택하는 것이다.

thumbnail로 지정하면 이미지 파일에 대하여 미리보기를 사용할 수 있다.

값을 지정하지 않으면 파일명과 파일크기가 리스트 형태로 출력된다.

fileid는 DIV id로 파일 업로드 라이브러리를 그리는 div를 의미하며,

지정된 DIV에 사용자가 보는 화면을 구성하게 된다.

uploadURL은 파일을 업로드 하면

서버에서 전송 받아 실제 파일로 저장하는 URL, 즉 컨트롤을 의미한다.

form은 제목, 내용, 파일 등 게시글과 관련된 항목을 가지고 있는 form 태그를 의미한다.

form은 사용자가 커밋을 하게 되면 formSubmit함수를 호출하여

파일을 먼저 서버에 저장하고,

파일 전송이 완료되면 guupload가 대신 submit을 하기 위한 것이다.

guuplaod는 파일명(filename), 실제 파일명(realname), 파일크기(filesize)의 세가지 정보를 제공한다.

실제 파일명(realname)는 파일을 서버에 저장하고 반환 받은 파일명을 의미한다.

이 값들은 다수의 파일을 전송 하기 때문에 콤마(,)로 구분하여 전송된다.

따라서 다음 코드와 같이 split로 구별하여 처리한다.

<%
    String filename = request.getParameter("filename");
    String realname = request.getParameter("realname");
    String filesize = request.getParameter("filesize");
    String[] reallist = realname.split(",");
    String[] filelist = filename.split(",");
    String[] sizelist = filesize.split(",");

    for (int i=0; i<filelist.length; i++) {
        out.println(filelist[i] + " : " + reallist[i] + " : " + sizelist[i] + "<br/>");
    }               
%>

upload_save.jsp

제공되는 디자인이 맘에 들지 않고, CSS를 알고 있다면

guupload.css 파일에서 수정하여 사용하면 된다.

대부분의 디자인을 수정할 수 있는 CSS 클래스를 포함하고 있다.