Web客户端HTML5大文件分割上传

68 阅读 0 评论 45 点赞

我是靠谱客的博主妩媚衬衫，最近开发中收集的这篇文章主要介绍Web客户端HTML5大文件分割上传，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

公司用AppCan开发了手机App，需用将手机拍摄的视频传到服务器，当视频较大是App会异常退出，于是想到通过将视频文件进行分割成小块进行传输，实现代码如下：

前台HTML代码

 1 <html>  
 2 <head>  
 3     <title>大文件分割上传</title>  
 4     <script type="text/javascript" src="Scripts/jquery-3.2.1.min.js"></script>  
 5     <script  type="text/javascript">
 6 
 7         var page = {
 8             init: function () {
 9                 $("#subUpload").click($.proxy(this.upload, this));
10             },
11             upload: function () {
12                 var file = $("#fileUpload")[0].files[0],  //文件对象  
13                     name = file.name,        //文件名  
14                     size = file.size,        //总大小  
15                     succeed = 0;
16                 var shardSize = 1024 * 1024,    //换算1MB=1 * 1024 * 1024  
17                     shardCount = Math.ceil(size / shardSize);  //总片数  
18                 for (var i = 0; i < shardCount; ++i) {
19                     //计算每一片的起始与结束位置  
20                     var start = i * shardSize,
21                         end = Math.min(size, start + shardSize);
22                     //构造一个表单，FormData是HTML5新增的  
23                     var form = new FormData();
24                     form.append("data", file.slice(start, end));  //slice方法用于切出文件的一部分  
25                     form.append("name", name);
26                     form.append("total", shardCount);  //总片数  
27                     form.append("index", i + 1);        //当前是第几片  
28                     //Ajax提交  
29                     $.ajax({
30                         url: "Account/UploadFile",
31                         type: "POST",
32                         data: form,
33                         async: true,        //异步  
34                         processData: false,  //很重要，告诉jquery不要对form进行处理  
35                         contentType: false,  //很重要，指定为false才能形成正确的Content-Type  
36                         success: function () {
37                             ++succeed;
38                             $("#output").text(succeed + " / " + shardCount);
39                         }
40                     });
41                 }
42             }
43         };
44 
45         $(function () {
46             page.init();
47         });  
48   
49     </script>  
50 </head>  
51 <body>  
52     <div>  
53         <input id="fileUpload" name="fileUpload" type="file" /><br />  
54         <button id="subUpload" type="submit">提交</button><br />  
55         <span id="output" style="font-size:12px">等待</span>  
56     </div>  
57 </body>  
58 </html>

后台C#代码

 1         /// <summary>
 2         /// 文件接受
 3         /// </summary>
 4         /// <returns></returns>
 5         public ActionResult UploadFile()
 6         {
 7             string name = Request["name"];
 8             int total = Convert.ToInt32(Request["total"]);
 9             int index = Convert.ToInt32(Request["index"]);
10             var data = Request.Files["data"];
11             string dir = Server.MapPath("/UploadFile/");
12             if (!Directory.Exists(dir))
13             {
14                 Directory.CreateDirectory(dir);
15             }
16             string file = Path.Combine(dir, name + "_" + index);
17             data.SaveAs(file);
18 
19             string[] files = Directory.GetFiles(dir);
20             bool isMerge = true;
21             for (int i = 1; i <= total; ++i)
22             {
23                 string part = Path.Combine(dir, name + "_" + i);
24                 if (!files.Contains(part))
25                 {
26                     isMerge = false;
27                     break;
28                 }
29             }
30 
31             if (isMerge)
32             {
33                 file = Path.Combine(dir, name);
34                 var fs = new FileStream(file, FileMode.Create);
35                 try
36                 {
37                     for (int i = 1; i <= total; ++i)
38                     {
39                         string part = Path.Combine(dir, name + "_" + i);
40                         var bytes = System.IO.File.ReadAllBytes(part);
41                         fs.Write(bytes, 0, bytes.Length);
42                         bytes = null;
43                         System.IO.File.Delete(part);
44                     }
45                 }
46                 catch // (Exception e)
47                 {
48                     //记录错误日志
49                     //log4net.log(e.ToString());
50                     //
51                     return Json(new { success = 0, msg = "上传完成，但合并文件时失败！" });
52                 }
53                 finally
54                 {
55                     fs.Close();
56                 }
57             }
58             //
59             return Json(new { success = 1,msg="上传成功" });
60         }