视频分片上传+C#后端合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 2.创建页面元素 -->
<div id="upload">
<input id="file" type="file" name="file" />
<button id="btnButton" type="button">提交2</button>
</div>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery-form.js"></script>
<script type="text/javascript">
$(function(){
$("#btnButton").click(function () {
sendRequest();
return false;
});
}) var BYTES_PER_CHUNK =1 * 1024 * 1024; // 每个文件切片大小定为1MB .
var slices;
var totalSlices; //发送请求
function sendRequest() {
var blob = document.getElementById("file").files[0];
var start = 0;
var end;
var index = 0; // 计算文件切片总数
slices = Math.ceil(blob.size / BYTES_PER_CHUNK);
totalSlices= slices;
while(start < blob.size) {
end = start + BYTES_PER_CHUNK;
if(end > blob.size) {
end = blob.size;
}
uploadFile(blob, index, start, end);
start = end;
index++;
if ( index>=totalSlices )
location="reboot.htm";
}
} //上传文件
function uploadFile(blob, index, start, end) {
var xhr;
var fd;
var chunk;
var sliceIndex=blob.name+index;
chunk =blob.slice(start,end);//切割文件
fd = new FormData();
fd.append("UpgradeFileName", chunk, sliceIndex);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://192.168.10.134:8080/Training/UploadVideo', false);//false指同步上传,因为我的服务器内存较小,选择同步,如果追求速度,可以选择 //ture,异步上传
xhr.send(fd);
if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
setTimeout("",10);
}else{
uploadFile(blob, index, start, end);
}
}
</script> </body>
</html>
/// <summary>
/// 文件合并
/// </summary>
/// <param name="files">文件列表</param>
/// <param name="fullName">存放路径</param>
public static void FileMerge(List<string> files, string fullName)
{
if (!(files.Count > ))
{
throw new Exception("文件列表为空");
}
foreach (string item in files)
{
if (!File.Exists(item))
{
throw new Exception(string.Format("文件{0}不存在", item));
}
}
byte[] buffer = new byte[ * ];
using (FileStream outStream = new FileStream(fullName, FileMode.Create))
{
int readedLen = ;
FileStream srcStream = null;
for (int i = ; i < files.Count; i++)
{
srcStream = new FileStream(files[i], FileMode.Open);
while ((readedLen = srcStream.Read(buffer, , buffer.Length)) > )
{
outStream.Write(buffer, , readedLen);
}
srcStream.Close();
}
}
}
视频分片上传+C#后端合并的更多相关文章
- 大文件分片上传,后端拼接保存(前端:antd;后端:.Net 5 WebAPI)
前言 对于普通业务场景而言,直接用 FormData() 将文件以入参的一个参数传给后端即可,但此方法有一个弊端就是,有个 30M 的上限. 对于动辄几百 M.几个 G 的文件上传需求,FormDat ...
- 视频大文件分片上传(使用webuploader插件)
背景 公司做网盘系统,一直在调用图片服务器的接口上传图片,以前写的,以为简单改一改就可以用 最初要求 php 上传多种视频格式,支持大文件,并可以封面截图,时长统计 问题 1.上传到阿里云服务器,13 ...
- plupload 大文件分片上传与PHP分片合并探索
最近老大分给我了做一个电影cms系统,其中涉及到一个功能,使用七牛云的文件上传功能.七牛javascript skd,使用起来很方便,屏蔽了许多的技术细节.如果只满足与调用sdk,那么可能工作中也就没 ...
- 聚是一团火散作满天星,前端Vue.js+elementUI结合后端FastAPI实现大文件分片上传
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_175 分片上传并不是什么新概念,尤其是大文件传输的处理中经常会被使用,在之前的一篇文章里:python花式读取大文件(10g/50 ...
- plupload分片上传视频文件源码展示
plupload分片上传视频文件目录结构如下: |- images//视频上传小图片 |-js// plupload js文件 |-uploads//视频文件存放文件夹 里面是按日期存放 |-ajax ...
- java后端分片上传接口
文件上传工具--FileUtil package com.youmejava.chun.util; import lombok.Data; import org.apache.tomcat.util. ...
- 30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)
现在的项目开发基本上都用到了上传文件功能,或图片,或文档,或视频.我们常用的常规上传已经能够满足当前要求了, 然而有时会出现如下问题: 文件过大(比如1G以上),超出服务端的请求大小限制: 请求时间过 ...
- 以寡治众各个击破,超大文件分片上传之构建基于Vue.js3.0+Ant-desgin+Tornado6纯异步IO高效写入服务
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_218 分治算法是一种很古老但很务实的方法.本意即使将一个较大的整体打碎分成小的局部,这样每个小的局部都不足以对抗大的整体.战国时期 ...
- Vue2.0结合webuploader实现文件分片上传
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
随机推荐
- js 过滤富文本标签数据
var str = '<p><code>uni-app</code> 完整支持 <code>Vue</code> 实例的生命周期,同时还新增 ...
- 五分钟搭建一个基于BERT的NER模型
BERT 简介 BERT是2018年google 提出来的预训练的语言模型,并且它打破很多NLP领域的任务记录,其提出在nlp的领域具有重要意义.预训练的(pre-train)的语言模型通过无监督的学 ...
- H3C 虚拟模板方式配置PPP MP
- (二)Centos7下Yum更新安装PHP5.5,5.6,7.0
yum源默认的版本太低了,手动安装有一些麻烦,想采用Yum更新安装的可以使用下面的方案: 1.检查当前安装的PHP包 yum list installed | grep php 如果有安装的PHP包, ...
- Python--day46--mysql触发器
触发器:当对某张表做:增删改操作时,可以使用触发器自定义关联行为 1,为什么需要创建mysql触发器? 比如说我往tb1表里面插入一条数据的时候,同时需要往日志表tb2中插入这条数据,这时候就需要创造 ...
- java 代理的概念与作用
1.引入: 为已存在的多个具有相同接口的目标类的各个方法增加一些系统功能,例如,异常处理.日志.计算方法的运行时间.事务管理.等等,你准备如何做? 编写一个与目标类具有相同接口的代理类,代理类的每个方 ...
- mysql去重, 把url重复且区为空的中去掉、统计重复数据、、结果集去重合并成一行
delete from 表名 where id not in (select d.id from (SELECT id FROM 表名 GROUP BY c1,c2,c3,c4)as d) #去重复, ...
- 【js】 vue 2.5.1 源码学习(一) 大体结构 (自写版本,非源码)
一.整体思路 1. 首先我们需要解析data,并且data里面的属性添加为vue的属性,并且拿到属性值 . 通过 原型方法 _peoxy实现 Obsever(代理函数) ==> walk ...
- 用户模式 Linux 移植
用户模式 Linux (UML) 是一个有趣的概念. 它被构建为一个分开的 Linux 内核移植, 有 它自己的 arch/um 子目录. 它不在一个新的硬件类型上运行, 但是; 相反, 它运行在一 ...
- dotnet 动态代理魔法书
看到标题的小伙伴是不是想知道什么是魔法书,如果你需要写一段代码,这段代码是在做神奇的业务,只有你查询到了魔法书你才能找到这个对象,同时你还需要实现自己的接口,通过自己实现的接口调用才能用到有趣的方法 ...