[ASP.NET] 如何利用Javascript分割檔案上傳至後端合併

最近研究了一下如何利用javascript進行檔案分割上傳並且透過後端。特地記錄一下相關的用法

先寫限制跟本篇的一些陷阱

1．就是瀏覽器的支援了 因為本篇有用到blob跟webworker

在ie中需要最少10版以上才有支援以下的方法喔！

2．因為我這是簡單的測試，所以我是將檔案存放在Session當中，實際要使用的話。應該會是將檔案分割存放在檔案系統中

廢話就不多說，我們先來看js端的程式碼

self.onmessage = function (e) {
    ////web worker started
    var blob = e.data.file; //取得檔案內容
    const SPLIT_BYTES = 100 * 1024; //檔案以每100KB做切割
    const SIZE = blob.size; //檔案的大小
    var start = 0; //位元組數的開頭
    var end = SPLIT_BYTES; //位元組數的結束
    var count = SIZE % SPLIT_BYTES == 0 ? SIZE / SPLIT_BYTES : Math.floor(SIZE / SPLIT_BYTES) + 1;
    //上述為計算一共會切出幾份檔案
    var intIdentifier = 1;
    var completed = 0;
    var xhr = new self.XMLHttpRequest();
    xhr.onload = function () {
        completed++; //完成上傳的計數器
        if (completed === count) {
            //當最後一個檔案成功上傳時，通知後端做檔案處理
            uploadComplete(e.data.pid, blob.name);
        }
    }
    //這裡代表當檔案可以進行切割時，就利用切割進行檔案上傳
    if(SIZE>SPLIT_BYTES){
        for (var i = 1; i <= count; i++) {
            var chunk = blob.slice(start, end); //##這裡需要特別注意的是，我們利用slice來將檔案的位元組數做"分段(切割)"讀取
            var url = '/Oberto/Manager/Home/fileUpload/' + intIdentifier + '?name=' + e.data.pid + "&filename=" + blob.name +"&cache="+Date.now();
            xhr.open('POST', url, false);
            xhr.setRequestHeader('Content-Type', 'application/octet-stream');
            xhr.send(chunk);
            //因為我們是"分段(切割)"做處理，所以我們的start與end要跟著做移動
            start = end; 
            end = start + SPLIT_BYTES;
            intIdentifier++;
        }
    } else {
        //這裡就是一般的檔案上傳動作了
        var url = '/Oberto/Manager/Home/fileUpload/' + intIdentifier + '?name=' + e.data.pid + "&filename=" + blob.name + "&cache=" + Date.now();
        xhr.open('POST', url, false);
        xhr.setRequestHeader('Content-Type', 'application/octet-stream');
        xhr.send(blob.slice(start, SIZE));
    }
   //這裡則是當分割的檔案上傳完成後，要通知後端處理
    function uploadComplete(id, name) {
        var url1 = '/Oberto/Manager/Home/UploadComplete?id=' + id + "&filename=" + name + "&semesterID=" + e.data.semesterID + "&cache=" + Date.now();;
        var xhr1 = new self.XMLHttpRequest();
        xhr1.onload = function (e) {
            var result = JSON.parse(xhr1.response);
            self.postMessage(result);
        }
        xhr1.open('POST', url1, true);
        xhr1.send(null);
    }
}

 

以上是我webwork程式所執行的內容，比較需要注意的部分是在於你需要利用blob.slice進行檔案分段的處理。

而我因為方便，將最後完成處理與分段上傳的動作分為兩個。因此在後端也會有相對應的程式碼

[HttpPost]
        [ValidateInput(false)]
        public string fileUpload(int id)
        {
            //這裡依照傳送過來的檔案大小，建立對應的byte陣列進行接收
            byte[] chunk = new byte[Request.InputStream.Length];
            //這裡就將檔案內容存入剛剛建立的byte陣列裡
            Request.InputStream.Read(chunk, 0, Convert.ToInt32(Request.InputStream.Length));
            if (Session["tempFiles"] == null)
            {
                Session["tempFiles"] = chunk;
                //因為我這裡是利用Session當示範，所以利用Session進行存放
            }
            else
            {
                //當已經接收過檔案時，這裡就額外建立一個合併用的byte
                //然後利用BlockCopy做合併的動作
                byte[] tempChunk = Session["tempFiles"] as byte[];
                byte[] newChunk = new byte[tempChunk.Length + chunk.Length];
                
                Buffer.BlockCopy(tempChunk, 0, newChunk, 0, tempChunk.Length);
                Buffer.BlockCopy(chunk, 0, newChunk,tempChunk.Length, chunk.Length);
                Session["tempFiles"] = newChunk;
            }
            return "InComplete";
        }

 

以上就是後端如何接收與處理分割後的檔案。至於完成後的處理，就看各位如何做了

我的最終完成後的處理其實就很簡單的將我Session存放的內容轉換成檔案放置到我的伺服器目錄下

這篇算是比較完整的從前端到後端整個分割檔案處理的流程

這裡有一點要注意的是，平常我們用XMLHttpRequest的時候做資料POST或GET 都會用非同步的方式  e.g.  xhr1.open( 'POST', url1, true);

而因為都用了Web Wroker了(也就是建一個新的執行緒，所以就算用同步也不會lock住我們目前頁面的主執行緒) 

這裡就可以改成同步，否則在非同步的情況下，透過FIDDLER會抓到Content-Length dismatch的錯誤

如果各位有什麼問題，歡迎留言發問唷

參考：

http://stackoverflow.com/questions/20212851/slice-large-file-into-chunks-and-upload-using-ajax-and-html5-filereader