百度Webuploader大文件分片上傳（.net接收）

2024-04-27 15:02:44

字體：大中小

來源：轉載

供稿：網友

　　前陣子要做個大文件上傳的功能，找來找去發現Webuploader還不錯，關于她的介紹我就不再贅述。

　　動手前，在園子里找到了一篇不錯的分片上傳的帖子，參考之后，踏出了第一步。此文記錄我這次實踐的點滴，僅作分享與討論。

　　關于插件的使用可以參考快速使用文檔。在Github上下載了最新的壓縮包后，基于其中的一個例子（image-upload）做了修改，主要是補充了.net后臺分片接收文件的實現。

　　先上干貨：WebUploadTest.zip 提取碼：fikn

　　分片上傳的上傳邏輯已經有控件實現。保存分片的邏輯是：

每次上傳文件，用js生成一個guid。請看upload.js 87行

GUID = WebUploader.Base.guid()

webuploader配置參數時會用到上面的guid。上傳并發數自己改吧，>1經過測試貌似也可以（我一開始用其他代碼測試時>1有報錯過，如有出錯留作討論）

后臺根據前端的guid，生成一個臨時文件夾，文件夾的用guid的值命名。然后分片文件以當前分片序數命名，保存在臨時文件夾。fileupload.ashx 24行

//取得chunk和chunks
int chunk = Convert.ToInt32(context.Request.Form["chunk"]);//當前分片在上傳分片中的順序（從0開始）
int chunks = Convert.ToInt32(context.Request.Form["chunks"]);//總分片數
//根據GUID創建用該GUID命名的臨時文件夾
string folder = context.Server.MapPath("~/1/" + context.Request["guid"]+"/");
string path = folder + chunk;//每個分片用數字命名

后臺每次返回一個json字符串。關于這個返回值是可以像構造Ajax返回參數一樣自定義的。我是這樣返回與接收的。請看fileupload.ashx 57行起

             //...
　　　　　　　　  context.Response.Write("{/"chunked/" : true, /"hasError/" : false, /"f_ext/" : /"" + Path.GetExtension(file.FileName) + "/"}");            }            else//沒有分片直接保存            {                context.Request.Files[0].SaveAs(context.Server.MapPath("~/1/" + DateTime.Now.ToFileTime() + Path.GetExtension(context.Request.Files[0].FileName)));                context.Response.Write("{/"chunked/" : false, /"hasError/" : false}");            }
　　　　　　　　//...

接收的js如下：upload.js 544行

        // 文件上傳成功,合并文件。        uploader.on('uploadSuccess', function (file, response) {            if (response.chunked) {                $.post("MergeFiles.ashx", { guid: GUID, fileExt: response.f_ext },                function (data) {                    data = $.parseJSON(data);                    if (data.hasError) {                        alert('文件合并失敗！');                    } else {                        alert(decodeURIComponent(data.savePath));                    }                });            }        });