.net + html5上传,在.net Core中如何使用HTML5上传视频
最近刚做了视频上传的功能,有一些心得还有注意事项,这里不贴全部代码,主要是讲述编码思路。本代码基于.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上传视频相关推荐
- Net core中使用System.Drawing对上传的图片流进行压缩
由于net core 中默认没有System.Drawing,可以通过nuget下载一个来代替System.Drawing.Common 直接压缩图片 /// <summary> /// ...
- js onclick传参对象_js中onClick([object object])的传参问题。跪求!
你的位置: 问答吧 -> JavaScript -> 问题详情 js中onClick([object object])的传参问题.跪求! 问题是这样的,看代码 for(var i=0;i ...
- iOS中打一个包上传后,iTunes中找不到上传的包的解决方法
今天再上传新包的时候,明明包已经上传成功,但是在iTunes中怎么都找不到我上传的包,一直让我构建一个新版本 可以看到已经上传成功,但是在iTunes中一直找不到我的包,一直让我构建版本 相当的焦灼, ...
- angularjs html5模式,angularjs – 确定在控制器中启用了HTML5模式
在Angular Js的控制器中,我想知道是否启用了 html5Mode.我怎样才能做到这一点? 细节: 在配置阶段我可以设置$locationProvider.html5Mode(true)或者我可 ...
- ASP.NET Core中的内存缓存
ASP.NET Core中的内存中缓存 让我们看看如何通过缓存优化ASP.NET Core应用程序性能 我相信,在我们的工作中,每个人都收到来自客户的请求或来自我们应用程序用户的反馈,以提高响应速度. ...
- Asp.Net Core中的静态文件-12
目录 本文出自<从零开始学 ASP.NET CORE MVC>目录 推荐文章:配置 ASP.NET Core 请求(Request)处理管道 Asp.Net Core 中的静态文件 在这 ...
- 在IIS上部署ASP.NET Core Web API
目录 Visual Studio 2019和Dot Net Core 3.0 Windows Server上的Dot Net Core运行时 在服务器上启用IIS IIS应用程序池 IIS网站 创建A ...
- 中间件是什么?在.NET Core中的工作原理又是怎样的呢?
本文出自<从零开始学ASP.NET CORE MVC> 推荐文章:ASP.NET Core appsettings.json文件 ASP.NET Core 中的中间件(Middleware ...
- 在TypeScript和ASP.NET Core中处理文件上传和受保护的下载
目录 介绍 背景 使用代码 注册您的API main.ts api-plugin.d.ts 上传文件 提交文件 API服务方法 ASP.NET Core API方法 下载文件 客户端API下载 保护上 ...
最新文章
- UI设计培训:UI设计师离不开的基本版式设计
- Firetruck(DFS+回溯)
- 前端学习(611):js组成
- 集合框架(一) ----------Map集合遍历的方法
- sql中 N’ 的作用
- 芯唐语音识别_大联大品佳推出基于新唐科技ISD9160+Cyberon算法的语音识别方案
- jQuery 常用效果
- 《实践与思考》系列连载(6)——IT从业人员工作环境及状态调查 抽奖结果公布...
- Salesforce入门教程(中文)-019 VF创建输入表单
- DeepFaceLab坑之ffmpeg
- android 版本lollipop,Android 5.0 Lollipop系统BUG盘点
- firebug lite for chrome
- 团队作业9——展示博客
- 肝移植笔记1:论文阅读-对率回归预测移植物失功概率
- 如何远程唤醒(WOL)主板为技嘉(gigabyte)的B85M-D3H的linux主机
- 剖析KCP以及KCP在游戏中是如何使用的
- 搭建Openstack环境以及Openstack认证服务
- 读内存为什么比读取磁盘快?快多少?
- 视频监控客户端开发(IP Camera)总结
- VisualSVN server下载安装
热门文章
- spring security 防CSRF攻击
- 《Same Representation,Different Attentions:Shareable Sentence Representation》阅读笔记
- JS 传参Url加密解密
- 「架构师必备」15个经典面试问题及回答思路
- swift5.5文档中测试代码与运行结果
- 鼎诚服务器批量管理助手
- cat卡特鞋有实体店吗_CAT卡特入驻广东天环广场 户外鞋大黄靴强势“坐馆”
- Mysql基础命令 及 SQL基本语法
- [Dubbo3.0.8源码解析系列]-12-全局视野来看Dubbo3.0.8的服务启动生命周期
- android的底层驱动调试心得