simpledemo 에 있는 index.php 파일 내에 포함되어있는 자바스크립트 파일을 수정하여 작성하였다.

// upload.js 파일

var swfu; // 업로드 플래쉬 객체

$(document).ready(function(){

    // SWFUpload 객체 설정값 지정
    var setting = {
        // 업로드 세션 구분을 위해 랜덤값을 GET 으로 전달했다.
        upload_url : "/swfupload/php/upload.php?unique_key=" + $("input#unique_key").val(),

        flash_url : "/swfupload/swf/swfupload.swf",

        file_post_name : "Filedata",

        file_upload_limit : parseInt($("input#maxFileNum").val()), // 파일 전송 최대 개수 upload.html 에 지정되어 있음

        button_placeholder_id : "spanSWFUploadButton", // 플래쉬로 교체될 DOM 엘레멘트
        button_image_url : "/swfupload/images/searchbutton.gif", // 플래쉬에 보여줄 버튼 이미지
        button_width : 66,
        button_height : 22,

        // The event handler functions are defined in handlers.js
        file_queued_handler : fileQueued,
        file_queue_error_handler : fileQueueError,
        file_dialog_complete_handler : fileDialogComplete,
        upload_start_handler : uploadStart,
        upload_progress_handler : uploadProgress,
        upload_error_handler : uploadError,
        upload_success_handler : uploadSuccess,
        upload_complete_handler : uploadComplete,
        queue_complete_handler : queueComplete, // Queue plugin event

        file_size_limit : $("input#maxFileSize").val(), // 파일 전송 최대 크기 upload.html 에 지정되어있음

        custom_settings : {
           progressTarget : "fsUploadProgress",
           cancelButtonId : "btnCancel"
        },

        // Debug settings
        debug: true // 디버그를 위해 설정해 줌
       }

     swfu = new SWFUpload(setting); // SWFUpload 객체 생성

     // 업로드 취소버튼에 클릭 이벤트 핸들러 등록, 기본적으로 disabled 설정
     var btnCancel = $("input#btnCancel");
     btnCancel.attr("disabled",true);
     btnCancel.click(function(){
        cancelQueue(upload1);
     });

     // 폼체크
     // 전송된 파일이 없으면 폼전송을 하지 않음
     // SWFUpload에 의해 전송이 되면 폼 하위에 히든 엘레멘트로 전송 파일 아이디를 넣어줌
     // (히든 엘레멘트의 클래스를 uploadedfile로 통일)
     $("form#uploadForm").submit(function(){
        if ($("input.uploadedfile").length == 0) {
            alert("업로드된 파일이 없습니다.");
            return false;
        }
    });
});

upload.html 실행결과(자바스크립트 오류 확인을 위해 Firefox에서 Firebug를 활성화 한 상태에서 실행하였다)

SWFUpload객체를 생성하였기 때문에 플래쉬 버튼이 보인다.

또한 객체 생성시 세팅값에 Debug : true 로 변경하였기 때문에 하단에 상태 표시창이 하나 생겼다. 실제 작동시에는 false로 변경할 것이다.

아직가지는 몇가지 문제가 있다.

• 우선 자바스크립트 오류가 나는데 simpledemo에서는 업로드 되면 상태를 id가 status인 레이어에 표시해 주는데
  uplaod.html 에 이를 만들지 않았기 때문이다.
• 파일선택후 선택한 파일명이 텍스트 박스에 나오지 않는다.
• 업로드 상태표시창에 메시지가 영어로 나오는데 한글로 바꿀 필요가 있다.
• 마지막으로 업로드 완료후 업로드 상태표시창이 일정시간이 지나면 사라지는데 이를 변경하여 사라지지 않고 클릭하여
  업로드 취소를 할 수 있도록 만들것 이다.
• 업로드가 완료가 되어도 폼 전송시 전송이 되지 않는다.

위의 문제는 /swfupload/js/handlers.js 와 /swfupload/js/fileprogress.js 두개의 파일을 수정하여 해결할 것이다.

//////////////////////////////////////////////////////////////////////////////////////

SWFUpload 로 업로드 구현(4) - handles.js, fileprogress.js

업로드 관련 핵심파일인 handles.js 파일과 fileprogress.js 파일을 수정하고자 한다.

handles.js는 SWFUpload가 발생시키는 이벤트에 따라 사용자가 알아볼 수 있도록

화면에 보여주는 역할을 한다.

fileprogress.js는 업로드 진행 상황에 따른 메시지를 웹페이지에 보여주는 역할을 한다.

상태 메시지등은 handles.js 파일 안에 있으므로 이를 수정하여 메시지를 한글로 바꿀 것이다.

수정하기 전에 파일 저장시 문자코드를 UTF-8로 변경하여야 한다. upload.html 파일의 문자코드를

UTF-8로 지정했으므로 이 곳도 맞춰 주어야 한글이 깨지지 않고 보여지게 된다.

이전 단계에서 발생했던 문제들을 하나씩 해결해보자.

메시지의 한글화 부분은 생략하기로 한다.

- 자바스크립트 오류

id가 status인 엘레멘트가 없어서 나는 오류였다. upload.html 에 엘레멘트를 만들지 않을 것이므로

handles.js 파일에서 다음 부분을 주석 처리해 준다. (이미 upload.html에 queueComplete 함수를

사용할 것으로 선언하였으므로 함수 자체를 주석처리하면 오류가 난다)

function queueComplete(numFilesUploaded) {
// var status = document.getElementById("divStatus");
// status.innerHTML = numFilesUploaded + " file" + (numFilesUploaded === 1 ? "" : "s") + " uploaded.";
}

- 파일선택후 선택한 파일명이 텍스트 박스에 나오지 않는다.

이는 <input type="file />의 형식이 아니므로 텍스트 박스에 파일명은 수동으로 지정해 주어야 한다.

멀티파일업로드가 가능하므로 파일이 선택됐을때가 아니라 업로드 시작시 파일명이 텍스트 박스에 보여지고

완료시 파일명이 사라지게 하도록 한다.

handles.js의 다음 부분을 수정하도록 한다.

// 전송 시작시 호출되는 자바스크립트 함수

function uploadStart(file) {
    try {
        /* I don't want to do any file validation or anything,  I'll just update the UI and
        return true to indicate that the upload should start.
        It's important to update the UI here because in Linux no uploadProgress events are called. The best
        we can do is say we are uploading.
        */
        var progress = new FileProgress(file, this.customSettings.progressTarget);
        progress.setStatus("전송중...");
        progress.toggleCancel(true, this);
        $("input#txtFileName").val(file.name); // 텍스트 필드에 업로드중인 파일명을 표시
    }
    catch (ex) {}
    return true;
}

...

// 전송 성공시 실행되는 자바스크립트 함수

function uploadSuccess(file, serverData) {
    try {
        var progress = new FileProgress(file, this.customSettings.progressTarget);
        progress.setComplete();
        progress.setStatus("전송완료");
        progress.toggleCancel(false);
        $("input#txtFileName").val(""); // 텍스트 필드 값 지움
    } catch (ex) {
        this.debug(ex);
    }
}

- 전송완료후  일정시간이 지나면 상태표시창이 사라짐

fileprogress.js 다음 부분을 주석처리하여 주도록 한다.

// 전송 상태창이 완료 됐음으로 바꾸어줌

FileProgress.prototype.setComplete = function () {
    this.fileProgressElement.className = "progressContainer blue";
    this.fileProgressElement.childNodes[3].className = "progressBarComplete";
    this.fileProgressElement.childNodes[3].style.width = "";

    //var oSelf = this;
    //this.setTimer(setTimeout(function () {
    //    oSelf.disappear();
    //}, 10000));
};

- 전송완료후 상태표시창에 취소 버튼(buttoncancel.gif)이 보이지 않음

handlers.js 에서 다음부분을 수정하여 주도록 한다.

function uploadSuccess(file, serverData) {
    try {
        var progress = new FileProgress(file, this.customSettings.progressTarget);
        progress.setComplete();
        progress.setStatus("전송완료");
        progress.toggleCancel(true); // 취소 버튼(cancelbutton.gif)을 보여줌

        $("input#txtFileName").val("");
    } catch (ex) {
    this.debug(ex);
    }
}

오류사항 외에 다음 기능을 추가하여야 한다.

- 임시 업로드 된 파일 중 실제 저장할 파일을 POST로 전달할 수 있게 폼변수 지정

- 전송완료 후 취소시 POST로 저장한 폼 변수 삭제

// 전송 성공시 호출되는 자바스크립트 함수

function uploadSuccess(file, serverData) {
    try {
        var progress = new FileProgress(file, this.customSettings.progressTarget);
        progress.setComplete();
        progress.setStatus("전송완료");
        progress.toggleCancel(true);

        $("input#txtFileName").val("");
  
        // 폼에 히든 엘리먼트 추가
        var uploadedFile = document.createElement("input");
        uploadedFile.id = "input_" + file.id; // 엘레멘트 아이디
        uploadedFile.name = "uploadedFile[]"; // 엘레멘트 이름 PHP에서 배열로 받기위해 []를 사용
        uploadedFile.className = "uploadedfile"; // 엘레멘트 클래스 명 jquery에서 히든값을 손쉽게 체크하기 위해 지정
        uploadedFile.type = "hidden";
        uploadedFile.value = serverData; // 폼 변수값은 upload.php에서 리턴해주는 값을 저장한다. 실제저장되어 있는 임시 파일명

        document.getElementById("uploadForm").appendChild(uploadedFile); // 폼 변수 값 추가
  
        progress.fileProgressElement.childNodes[0].onclick=function(){
            // 취소버튼 클릭시 전송된 파일명을 저장하고 있는 히든 엘리먼트 삭제
            if (confirm("전송된 파일 \'" + file.name + "\'을 삭제하시겠습니까?")) {
                document.getElementById("uploadForm").removeChild(document.getElementById("input_" + file.id));
                progress.setTimer(setTimeout(function () {
                    progress.disappear();
                }, 300));
                swfu.setFileUploadLimit(swfu.getSetting("file_upload_limit")+1); // 파일전송 가능 개수를 1개 늘림
            }
        }
    } catch (ex) {
        this.debug(ex);
    }
}

upload.html 실행결과

/////////////////////////////////////////////////////////////////////////////////

SWFUpload 로 업로드 구현(5) - upload.php