百度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));                    }                });            }        });