조각화된 파일 업로드

// 하나의 파일을 업로드하는 클래스
function Uploader(file) {
    var self = this;
    this._file = file;
    this._fileUid = createUUID();
    this._serverFileKey = "";        // 업로드 성공시 서버에서 전달된 고유 값을 저장(이 예제에서는 파일 이름이 사용됨)

    this._fileSize = file.size;
    this._chunkSize = 10 * (1024 * 1024); // 전송할 조각 크기 10MB
    this._rangeStart = 0;
    this._rangeEnd = this._chunkSize;
    // 파일 내용 중 일부를 읽은 메서드 이름이 브라우저 마다 다름
    if ('mozSlice' in file) {
        this._sliceMethod = 'mozSlice';
    }
    else if ('webkitSlice' in file) {
        this._sliceMethod = 'webkitSlice';
    }
    else {
        this._sliceMethod = 'slice';
    }
    this._aborted = false;

    this._xhr = new XMLHttpRequest();
    this._xhr.addEventListener("load", chunkTransferComplete);
    this._xhr.upload.addEventListener("progress", updateProgress);
    this._xhr.upload.addEventListener("error", transferFailed);

    // uploadList에 업로드 아이템을 하나 추가한다.
    var li = document.createElement("li");
    var fileNameSpan = document.createElement("span");
    var blankSpan = document.createElement("span");
    var progressSpan = document.createElement("span");
    var cancelLink = document.createElement("a");
    fileNameSpan.innerHTML = file.name;
    blankSpan.innerHTML = " ";
    cancelLink.setAttribute("href","#");
    cancelLink.innerHTML = "[X]";
    li.appendChild(fileNameSpan);
    li.appendChild(blankSpan);
    li.appendChild(progressSpan);
    li.appendChild(cancelLink);
    var uploadList = document.getElementById("uploadList");
    uploadList.appendChild(li);

    // 취소 버튼 클릭 이벤트
    cancelLink.onclick = function () {
        self._aborted = true;
        self._xhr.abort();            // 업로드 취소
        self._removeUploadItem();    // 업로드 파일 목록에서 제거
    };

    // 업로드를 시작시킨다.
    this.startUpload = function () {
        var uploader = self, chunk;
        setTimeout(function() {
            // 범위 오버플로어 차단
            if (uploader._rangeEnd > uploader._fileSize) {
                uploader._rangeEnd = uploader._fileSize;
            }

            // 파일 데이터에서 일부를 읽어 서버로 전송한다.
            chunk = uploader._file[uploader._sliceMethod](uploader._rangeStart, uploader._rangeEnd);     
            uploader._xhr.open('POST', "upload_chunk.asp", true);
            // 파일 이름을 명시한다.
            uploader._xhr.setRequestHeader("file-name", encodeURIComponent(uploader._file.name));
            // 서버에서 파일 조각을 구분할 수 있도록 고유한 ID를 전송한다.
            uploader._xhr.setRequestHeader("file-uid", uploader._fileUid);
            // 파일 조각의 범위를 명시한다.
            uploader._xhr.setRequestHeader('Content-Range', 'bytes ' + self._rangeStart + '-' + self._rangeEnd + '/' + self._fileSize);
            uploader._xhr.send(chunk);
        }, 20);
    }

    this._transferComplete = function (response) {
        progressSpan.innerHTML = "";
        self._serverFileKey = response;
        uploadFileList.add(self._serverFileKey);
    }

    this._removeUploadItem = function () {
        uploadList.removeChild(li);
        uploadFileList.remove(self._serverFileKey);
    }

    // AJAX 데이터가 전송되는 동안 수시로 발생하는 이벤트로 진행 과정을 출력한다.
    function updateProgress(evt) {
        if (evt.lengthComputable) {
            var percentComplete = Math.ceil((self._rangeStart + evt.loaded) / self._fileSize * 100);
            progressSpan.innerHTML = percentComplete + "%";
        }
    }

    // 하나의 조각 업로드가 완료되면 호출되는 이벤트로 성공시 다음 조각 업로드를 진행한다.
    function chunkTransferComplete() {
        if (this.status == 200) {
            if (self._rangeEnd === self._fileSize) {
                // 마지막 조각 업로드가 완료되어 한 파일 업로드가 끝났다.
                self._transferComplete(this.responseText);
                return;
            }         
            // range 값 갱신 후 계속 업로드
            self._rangeStart = self._rangeEnd;
            self._rangeEnd = self._rangeStart + self._chunkSize;
            if (!self._aborted) self.startUpload();
        } else {
            alert("ERROR : " + this.responseText);
            self._removeUploadItem();
        }
    }        

    // 파일 업로드 도중 오류 발생
    function transferFailed(evt) {
        self._removeUploadItem();
        console.log("An error occurred while transferring the file.");
    }
}

<%@ CodePage=65001 Language=VBScript %>
<%
UploadPath = "C:\Temp\Upload"

Set upload = Server.CreateObject("TABSUpload4.UploadSingle")
upload.FileNameHeader = "file-name"
'하나의 파일에 대한 청크 바이너리 업로드 데이터를 처리한다.
upload.StartChunked "C:\Temp"

'마지막 청크가 도착해 업로드가 완료되었는지 검사한다.
If upload.ChunkedUploadCompleted Then
    ' 업로드가 완료되면 실제 파일로 저장한다.
    upload.Save UploadPath, False
    Response.Write upload.ShortSaveName

    'AJAX으로 업로드된 파일은 가비지 파일이 될 수 있으므로 TempFileManager에서 일정 시간(5시간) 동안만 유지 시킨다.
    Set tmgr = Server.CreateObject("TABSUpload4.TempFileManager")
    tmgr.AddFile upload.SaveName, 60 * 5
End If
%>