最近刚做了视频上传的功能,有一些心得还有注意事项,这里不贴全部代码,主要是讲述编码思路。本代码基于.net core 、html5示例

完成视频上传的两种思路

1、视频分片上传,比如把整个视频拆分成2兆一片,最后一片上传完再组合成一个视频。这种方式是针对断网、服务器中断连接等中断的情况

具体实现方式:

计算文件需要差分成几片

按1,2,3...排序拆好放到文件夹

最后一片拆好后合并成一个视频文件

最后删除分片的文件夹,避免无用资源堆积

以下是html部分的代码

开始上传

代码分析:HTML定义了显示文件路径文本框、选择文件的按钮、上传按钮、显示视频的Video(html5出的)。点击浏览选择文件,文件路径显示在上面的文本框内,点击开始上传按钮执行上传代码。

以下是JS代码:

var UploadPath = "";

var errorNum = 0;

var stop = false;

//开始上传

functionUploadStart() {

var file = $("#path")[0].files[0]; if (file.length <= 0) { $.fail("请选择文件"); return false; } $("#file").attr("onclick", "void()"); $("#file").html("上传中..."); $("#file").attr("disabled", true);//禁用上传按钮 AjaxFile(file, 0); } functionAjaxFile() { var file = $("#path")[0].files[0]; var name = file.name, //文件名 size = file.size, //总大小shardSize = 2 * 1024 * 1024, shardSize = 2 * 1024 * 1024,//以2MB为一个分片 shardCount = Math.ceil(size / shardSize); //总片数 if (i >=shardCount) { return; } //计算每一片的起始与结束位置 var start = i *shardSize, end = Math.min(size, start +shardSize); //构造一个表单,FormData是HTML5新增的 var form = newFormData(); form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分 form.append("lastModified", file.lastModified); form.append("fileName", name); form.append("total", shardCount); //总片数 form.append("index", i + 1); //当前是第几片 form.append("sizeKB", size / 1024); //大小 KB UploadPath =file.lastModified; //Ajax提交文件 $.ajax({ url: "后台处理地址", type: "POST", xhrFields: { withCredentials: true //配置http跨域请求中携带cookie }, data: form, async: true, //异步 processData: false, //很重要,告诉jquery不要对form进行处理 contentType: false, //很重要,指定为false才能形成正确的Content-Type success: function(result) { if (result != null) { if (result.code == "-1") { $.fail(result.msg); $("#file").attr("onclick", "UploadStart()"); $("#file").val("开始上传"); $("#file").attr("disabled", false); return false; } i = result.number++; var num = Math.ceil(i * 100 /shardCount); if (num > 99) { $("#output").text("即将完成..."); } else{ $("#output").text(num + '%'); } $("#labErrorTip").html(""); $("#showXC").css("display", "none"); AjaxFile(file, i); if(result.mergeOk) { var filepath = $("#path"); filepath.after(filepath.clone().val("")); filepath.remove();//清空input file $("#output").text("上传成功"); $("#VideoURL").attr("src", result.data);//更新数据源 document.getElementById("myVideo").load();//重新启动Video,如果不重新启动Video不会播放新视频 document.getElementById("myVideo").play();//播放 $("#file").removeAttr("disabled");//打开上传按钮 $("#file").html("开始上传"); } } }, error: function() { errorNum = errorNum + 1; if (errorNum > 2) { $("#labErrorTip").html("发生异常"); $("#showXC").css("display", "block"); $("#btnXC").attr("onclick", "UploadStart()"); } else{ $("#labErrorTip").html("发生异常,正在尝试继续上传"); AjaxFile(file, i); } } }); }

代码分析:在js里对文件进行拆分,拆分的计算公式跟分页的理论一样,然后把片段发到后台进行一系列处理。上面要注意的点都写了注释,重点的几个点也标注了。后台代码就不贴了,组合片段的方式网上搜一搜可以找到,记得找出的片段排下序以免视频错乱。

2、也可以整个视频上传后,如果中断可根据已上传的大小来判断从某个点开始继续上传。这种方式没做过,道理差不多

.net + html5上传,在.net Core中如何使用HTML5上传视频相关推荐

  1. Net core中使用System.Drawing对上传的图片流进行压缩

    由于net core 中默认没有System.Drawing,可以通过nuget下载一个来代替System.Drawing.Common 直接压缩图片 /// <summary> /// ...

  2. js onclick传参对象_js中onClick([object object])的传参问题。跪求!

    你的位置: 问答吧 -> JavaScript -> 问题详情 js中onClick([object object])的传参问题.跪求! 问题是这样的,看代码 for(var i=0;i ...

  3. iOS中打一个包上传后,iTunes中找不到上传的包的解决方法

    今天再上传新包的时候,明明包已经上传成功,但是在iTunes中怎么都找不到我上传的包,一直让我构建一个新版本 可以看到已经上传成功,但是在iTunes中一直找不到我的包,一直让我构建版本 相当的焦灼, ...

  4. angularjs html5模式,angularjs – 确定在控制器中启用了HTML5模式

    在Angular Js的控制器中,我想知道是否启用了 html5Mode.我怎样才能做到这一点? 细节: 在配置阶段我可以设置$locationProvider.html5Mode(true)或者我可 ...

  5. ASP.NET Core中的内存缓存

    ASP.NET Core中的内存中缓存 让我们看看如何通过缓存优化ASP.NET Core应用程序性能 我相信,在我们的工作中,每个人都收到来自客户的请求或来自我们应用程序用户的反馈,以提高响应速度. ...

  6. Asp.Net Core中的静态文件-12

    目录 本文出自<从零开始学 ASP.NET CORE MVC>目录  推荐文章:配置 ASP.NET Core 请求(Request)处理管道 Asp.Net Core 中的静态文件 在这 ...

  7. 在IIS上部署ASP.NET Core Web API

    目录 Visual Studio 2019和Dot Net Core 3.0 Windows Server上的Dot Net Core运行时 在服务器上启用IIS IIS应用程序池 IIS网站 创建A ...

  8. 中间件是什么?在.NET Core中的工作原理又是怎样的呢?

    本文出自<从零开始学ASP.NET CORE MVC> 推荐文章:ASP.NET Core appsettings.json文件 ASP.NET Core 中的中间件(Middleware ...

  9. 在TypeScript和ASP.NET Core中处理文件上传和受保护的下载

    目录 介绍 背景 使用代码 注册您的API main.ts api-plugin.d.ts 上传文件 提交文件 API服务方法 ASP.NET Core API方法 下载文件 客户端API下载 保护上 ...

最新文章

  1. UI设计培训:UI设计师离不开的基本版式设计
  2. Firetruck(DFS+回溯)
  3. 前端学习(611):js组成
  4. 集合框架(一) ----------Map集合遍历的方法
  5. sql中 N’ 的作用
  6. 芯唐语音识别_大联大品佳推出基于新唐科技ISD9160+Cyberon算法的语音识别方案
  7. jQuery 常用效果
  8. 《实践与思考》系列连载(6)——IT从业人员工作环境及状态调查 抽奖结果公布...
  9. Salesforce入门教程(中文)-019 VF创建输入表单
  10. DeepFaceLab坑之ffmpeg
  11. android 版本lollipop,Android 5.0 Lollipop系统BUG盘点
  12. firebug lite for chrome
  13. 团队作业9——展示博客
  14. 肝移植笔记1:论文阅读-对率回归预测移植物失功概率
  15. 如何远程唤醒(WOL)主板为技嘉(gigabyte)的B85M-D3H的linux主机
  16. 剖析KCP以及KCP在游戏中是如何使用的
  17. 搭建Openstack环境以及Openstack认证服务
  18. 读内存为什么比读取磁盘快?快多少?
  19. 视频监控客户端开发(IP Camera)总结
  20. VisualSVN server下载安装

热门文章

  1. spring security 防CSRF攻击
  2. 《Same Representation,Different Attentions:Shareable Sentence Representation》阅读笔记
  3. JS 传参Url加密解密
  4. 「架构师必备」15个经典面试问题及回答思路
  5. swift5.5文档中测试代码与运行结果
  6. 鼎诚服务器批量管理助手
  7. cat卡特鞋有实体店吗_CAT卡特入驻广东天环广场 户外鞋大黄靴强势“坐馆”
  8. Mysql基础命令 及 SQL基本语法
  9. [Dubbo3.0.8源码解析系列]-12-全局视野来看Dubbo3.0.8的服务启动生命周期
  10. android的底层驱动调试心得