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

2018-06-23 23:12:13来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

最近研究了一下如何利用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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:参数化查询模糊查询

下一篇:面试题的分享有待我们大家的征服