视频分片上传+C#后端合并

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› Node.js›Node.js教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

<!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 > 0))
            {
                throw new Exception("文件列表为空");
            }
            foreach (string item in files)
            {
                if (!File.Exists(item))
                {
                    throw new Exception(string.Format("文件{0}不存在", item));
                }
            }
            byte[] buffer = new byte[1024 * 100];
            using (FileStream outStream = new FileStream(fullName, FileMode.Create))
            {
                int readedLen = 0;
                FileStream srcStream = null;
                for (int i = 0; i < files.Count; i++)
                {
                    srcStream = new FileStream(files[i], FileMode.Open);
                    while ((readedLen = srcStream.Read(buffer, 0, buffer.Length)) > 0)
                    {
                        outStream.Write(buffer, 0, readedLen);
                    }
                    srcStream.Close();
                }
            }
        }