팝업 JavaScript 수정

팝업 페이지에 사용되는 JavaScript 코드는 quick_photo_uploader/popup/QuickPhotoPopup.js 파일에 포함되어 있다. HTML5를 지원하지 않는 브라우저에서 사용하는 callFileUploader() 함수와 HTML5를 지원하는 브라우저에서 사용하는 html5Upload() 함수, 그리고 공통으로 사용하는 setPhotoToEditor() 함수를 수정해야 한다.

callFileUploader() 함수

callFileUploader() 함수는 HTML5를 지원하지 않는 브라우저에서 사용되며, Jindo FileUploader 컴포넌트를 초기화한다. 파일 선택이 완료되었을 때, 업로드가 정상적으로 완료되었을 때, 업로드가 실패했을 때 수행할 동작을 이 함수 내에 구현해야 한다. Jindo FileUploader 컴포넌트에 대한 자세한 내용은 "부록. jindo.FileUploader"를 참고한다.

표 9 jindo.FileUploader 구성 요소

구분	설명
sUrl	사진을 업로드할 서버의 경로. "PHP 서버 설정"에서 설정한 경로를 입력한다.
sFiletype	업로드할 수 있는 파일 형식. 각 형식은 세미콜론(;)으로 구분한다.
select()	파일 선택이 완료되었을 때 발생하는 함수
success()	업로드가 성공적으로 완료되었을 때 발생하는 함수
error()	업로드가 실패했을 때 발생하는 함수

사진 퀵 업로더를 설치한 후 실제로 사용하려면 반드시 sUrl 속성을 "PHP 서버 설정"에서 설정한 PHP 서버의 PHP 파일 URL로 변경해야 한다.

html5Upload() 함수

html5Upload() 함수는 HTML5를 지원하는 브라우저에서 사용되며, Jindo $Ajax로 다음과 같이 구현된다.

function html5Upload() {
        var tempFile,
             sUploadURL;

        //업로드할 URL 입력
        sUploadURL= 'file_uploader_html5.php';

        //여러 파일이 선택 되었을 때, 파일을 하나씩 보내고 결과를 받음.
        for(var j=0, k=0; j < nImageInfoCnt; j++) {
            tempFile = htImageInfo['img'+j];
            try{
                if(!!tempFile){
                    //Ajax통신하는 부분. 파일과 업로드 할 url을 전달한다.
                    callAjaxForHTML5(tempFile,sUploadURL);
                    k += 1;
                }
            }catch(e){}
            tempFile = null;
        }
    }

function callAjaxForHTML5 (tempFile, sUploadURL){
        var oAjax = jindo.$Ajax(sUploadURL, {
            type: 'xhr',
            method : "post",
            onload : function(res){ // 요청이 완료되면 실행될 콜백 함수
                if (res.readyState() == 4) {
                    //성공 시에  responseText를 가지고 array로 만드는 부분.
                    makeArrayFromString(res._response.responseText);
                }
            },
            timeout : 3,
            onerror :  jindo.$Fn(onAjaxError, this).bind()
        });
        oAjax.header("contentType","multipart/form-data");
        oAjax.header("file-name",encodeURIComponent(tempFile.name));
        oAjax.header("file-size",tempFile.size);
        oAjax.header("file-Type",tempFile.type);
        oAjax.request(tempFile);
}

사진 퀵 업로더를 설치한 후 실제로 사용하려면 반드시 sUrl 속성을 "PHP 서버 설정"에서 설정한 PHP 서버의 PHP 파일 URL로 변경해야 한다.

html5Upload() 함수에서 호출하는 callAjaxForHTML5() 함수는 서버와 통신하는 코드를 분리해 놓은 함수로, 구성 요소는 다음과 같다.

표 10 callAjaxForHTML5() 함수 구성 요소

구분	설명
onload	요청 완료 시 실행되는 콜백 함수. 반드시 지정해야 하며 콜백 함수의 파라미터로 응답 객체인 $Ajax.Response 객체가 전달된다. 위 예제에서는 onload에 정의한 함수에서 makeArrayFromString () 함수를 호출한다.
onerror	오류 발생 시 실행되는 콜백 함수. 생략하면 오류가 발생해도 onload에 지정한 콜백 함수를 실행한다.
htImageInfo	이미지 파일의 정보. drop() 함수에서 데이터를hashTable 형태로 데이터를 입력하며, 전달되는 dataTransfer.File은 name, size, type 등의 정보를 제공한다. drop() 함수에서의 이미지 파일 정보 처리 방식을 변경하면 다른 동작에도 영향을 준다. 따라서 서버에서 처리하기 편한 형태로 변경하려면 다음 예와 같이 html5Upload() 함수에서 서버로 데이터를 전송하기 전 단계에서 데이터를 가공하는 것을 권장한다. 예: `htImageInfo = {'img1':file1, 'img2':files2, ... };`

Jindo $Ajax는 다양한 통신 방법과 함수를 제공하므로 다음 내용을 참고하여 수정하는 것을 권장한다.

Jindo $Ajax: http://jindo.dev.naver.com/docs/jindo/latest/desktop/ko/classes/jindo.$Ajax.html
HTML5 File API: http://www.w3.org/TR/FileAPI/
Jindo 컴포넌트: https://github.com/naver/jindojs-jc

setPhotoToEditor() 함수

setPhotoToEditor() 함수는 브라우저의 HTML5 지원 여부와 상관없이 사용되며, 파일이 성공적으로 업로드되면 서버로부터 받은 데이터를 에디터에 삽입한다. 에디터로 전송되는 기본 데이터 형식은 각 사진의 정보로 구성된 HashMap을 포함하는 Array이다.

표 11 setPhotoToEditor 함수 구성 요소

구분	설명
sFileName	파일명
sFileURL	도메인과 파일명을 포함한 전체 경로
bNewLine	이미지 사이에 간격(br tag)을 넣을지 여부를 boolean 값으로 지정한다.

setPhotoToEditor() 함수를 통해 에디터로 전송되는 데이터의 예는 다음과 같다.

var res =[ {sFileName : "코코몽.jpg",
        sFileURL :"http://image_server.domain.net/20120315/코코몽.jpg",
        bNewLine : true },
        {sFileName : "오몽.jpg",
        sFileURL :" http://image_server.domain.net/20120315/오몽.jpg",
        bNewLine : true }, …  ];

팝업 JavaScript 수정