JavaScript+PHP实现视频文件分片上传

摘要

视频文件分片上传,整体思路是利用JavaScript将文件切片,然后循环调用上传接口 upload.php 将切片上传到服务器。这样将由原来的一个大文件上传变为多个小文件同时上传,节省了上传时间,这就是文件分片上传的其中一个好处。

在这里插入图片描述

上代码

index.html

通过前端将文件对象切分成多个小块,然后依次将这些小块的文件对象上传到服务器。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>视频文件分片上传</title><style>*{padding: 0;margin: 0;}.title {text-align: center;font-size: 25px;margin-top: 50px;}.video_upload {width: 500px;height: 60px;background: #eee;margin: 30px auto 0;border: 2px dashed #ccc;border-radius: 10px;position: relative;cursor: pointer;text-align: center;font-size: 25px;line-height: 60px;color: #666;}#fileInput {width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;cursor: pointer;}#uploadButton {width: 130px;height: 40px;border: none;outline: none;border-radius: 10px;font-size: 17px;margin: 10px auto;}#ret {text-align: center;font-size: 16px;margin-top: 20px;}#ret video {width: 450px;}</style></head><body><p class="title">javaScript+PHP实现视频文件分片上传</p><div class="video_upload"><span class="text"> + </span><input type="file" id="fileInput" accept="video/*"></div><button id="uploadButton" style="display:none;">开始上传</button><p id="ret"></p><script>// 定义全局变量let videoFile = null;let chunkSize = 1024 * 1024; // 1MB 分片大小// 当文件选择框的值改变时触发该函数function handleFileSelect(event) {const fileList = event.target.files;if (fileList.length > 0) {videoFile = fileList[0];console.log("选择了文件: ", videoFile.name);document.querySelector('.video_upload .text').textContent = videoFile.name;document.querySelector('#uploadButton').style.display = 'block';}}// 分片并上传文件async function uploadFile() {if (!videoFile) {console.error("请选择一个视频文件");return;}const fileSize = videoFile.size;let start = 0;let end = Math.min(chunkSize, fileSize);let chunkIndex = 0;// 获取文件名const fileName = videoFile.name;while (start < fileSize) {const chunk = videoFile.slice(start, end); // 从文件中截取一个分片// 使用FormData来构建multipart/form-data格式的请求体const formData = new FormData();formData.append('file', chunk);formData.append('chunkIndex', chunkIndex);formData.append('fileName', fileName); // 将文件名作为 formData 的一部分try {const response = await fetch('upload.php', {method: 'POST',body: formData});if (!response.ok) {throw new Error('上传失败');}console.log('上传分片 ', chunkIndex, ' 成功');} catch (error) {console.error('上传分片 ', chunkIndex, ' 失败: ', error.message);return;}start = end;end = Math.min(start + chunkSize, fileSize);chunkIndex++;}console.log('文件上传完成');// 上传完成后发送通知给服务器进行合并notifyServerForMerge(fileName);}// 发送通知给服务器进行合并async function notifyServerForMerge(fileName) {try {const response = await fetch('merge_chunks.php', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ fileName: fileName })});if (!response.ok) {throw new Error('无法通知服务器进行合并');}const res_data = await response.json();console.log('已通知服务器进行合并');document.querySelector('.video_upload .text').textContent = '分片合并完成!';document.querySelector('#ret').innerHTML = '<video autoplay controls src="'+res_data.filePath+'"></video>';document.querySelector('#uploadButton').style.display = 'none';} catch (error) {console.error('通知服务器进行合并时发生错误: ', error.message);}}// 注册文件选择框的change事件document.getElementById('fileInput').addEventListener('change', handleFileSelect);// 注册上传按钮的click事件document.getElementById('uploadButton').addEventListener('click', uploadFile);</script></body>
</html>

upload.php

这个是用于接收前端传过来的每一段分片,然后上传到 uploads 文件夹,上传之后就是一段一段的小分片。

<?php// 设置允许跨域访问header("Access-Control-Allow-Origin: *");header("Access-Control-Allow-Methods: POST");// 检查是否接收到文件和分片索引if (isset($_FILES['file']['error']) && isset($_POST['chunkIndex']) && isset($_POST['fileName'])) {$error = $_FILES['file']['error'];$chunkIndex = $_POST['chunkIndex'];$fileName = $_POST['fileName']; // 获取文件名// 检查是否有错误if ($error !== UPLOAD_ERR_OK) {http_response_code(500);echo json_encode(array('error' => '文件上传失败'));exit();}// 设置存储目录和文件名$uploadDir = './uploads/';$filePath = $uploadDir . $fileName . '.' . $chunkIndex;// 将分片移动到指定的目录if (move_uploaded_file($_FILES['file']['tmp_name'], $filePath)) {echo json_encode(array('success' => '分片上传成功'));} else {http_response_code(500);echo json_encode(array('error' => '分片上传失败'));}} else {http_response_code(400);echo json_encode(array('error' => '缺少文件、分片索引或文件名'));}?>

merge_chunks.php

这个是用来合并分片的,当前端完成上传分片的操作,前端会异步告诉服务器你已经完成所有分片的上传,接下来将每个分片名告诉合并程序完成所有分片的合并,合并之后就是一个完整的视频文件。

<?php// 设置允许跨域访问header("Access-Control-Allow-Origin: *");header("Access-Control-Allow-Methods: POST");header("Content-Type: application/json");// 获取请求体中的文件名$data = json_decode(file_get_contents("php://input") , true);$fileName = isset($data['fileName']) ? $data['fileName'] : null;if ($fileName) {$uploadDir = './uploads/';$finalFilePath = $uploadDir . $fileName;$totalChunks = count(glob($uploadDir . $fileName . '.*'));// 检查是否所有分片都已上传if ($totalChunks > 0) {// 所有分片都已上传,开始合并$finalFile = fopen($finalFilePath, 'wb');// 逐个读取分片并写入最终文件for ($i = 0; $i < $totalChunks; $i++) {$chunkFilePath = $uploadDir . $fileName . '.' . $i;$chunkFile = fopen($chunkFilePath, 'rb');stream_copy_to_stream($chunkFile, $finalFile);fclose($chunkFile);unlink($chunkFilePath); // 删除已合并的分片}fclose($finalFile);http_response_code(200);echo json_encode(array('success' => '文件合并成功','filePath' => $finalFilePath));} else {http_response_code(400);echo json_encode(array('error' => '没有上传的分片'));}} else {http_response_code(400);echo json_encode(array('error' => '缺少文件名'));}
?>

程序目录

请自行创建 uploads 目录。
在这里插入图片描述

作者

TANKING

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/265960.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法沉淀——动态规划之两个数组的 dp(下)(leetcode真题剖析)

算法沉淀——动态规划之两个数组的 dp 01.正则表达式匹配02.交错字符串03.两个字符串的最小ASCII删除和04.最长重复子数组 01.正则表达式匹配 题目链接&#xff1a;https://leetcode.cn/problems/regular-expression-matching/ 给你一个字符串 s 和一个字符规律 p&#xff0c…

【Unity每日一记】角色控制器Character Contorller

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

Python中的数据类型

如果说python中的数据类型,那我们要从标准数据类型说起,在python中标准数据类型如下: 数字类型: 数字数据类型用于存储数值。 他们是不可改变的数据类型&#xff0c;这意味着改变数字数据类型会分配一个新的对象。 在python2.X中数据类型分的比较多,有int(有符号整型),long(…

Redis——服务器

Redis服务器负责与多个客户端建立网络连接&#xff0c;处理客户端发送的命令请求&#xff0c;在数据库中保存客户端执行命令所产生的数据&#xff0c;并通过资源管理来维持服务器自身的运行。 一. 命令请求的执行过程 一个命令请求从发送到获得回复过程中&#xff0c;客户端和服…

【MySQL】基本查询(表的增删改查)-- 详解

CRUD&#xff1a;Create&#xff08;创建&#xff09;&#xff0c;Retrieve&#xff08;读取&#xff09;&#xff0c;Update&#xff08;更新&#xff09;&#xff0c;Delete&#xff08;删除&#xff09;。 一、Create insert [into] table_name [(column [, column] ...)] v…

从0到1实现五子棋游戏!!

Hello&#xff0c;好久不见宝子们&#xff0c;今天来给大家更一个五子棋的程序~ 我们今天要讲的内容如下&#xff1a; 文章目录 1.五子棋游戏介绍1.1 游戏玩法介绍&#xff1a; 2.准备工作2.1 具体操作流程 3.游戏程序主函数4.初始化棋盘4.1.定义宏变量4.2 初始化棋盘 5.打印…

什么是VR紧急情况模拟|消防应急虚拟展馆|VR游戏体验馆加盟

VR紧急情况模拟是利用虚拟现实&#xff08;Virtual Reality&#xff0c;简称VR&#xff09;技术来模拟各种紧急情况和应急场景的训练和演练。通过VR技术&#xff0c;用户可以身临其境地体验各种紧急情况&#xff0c;如火灾、地震、交通事故等&#xff0c;以及应对这些紧急情况的…

常用git 打tag命令

1.查看所有tag git tag 2.创建 v5.0.0的tag git tag v5.0.0 git tag &#xff08;创建后查看&#xff09; 3.推送到远程tag git push origin v5.0.0 4.删除远程tag git push origin --delete v5.0.0 5.删除本地tag git tag -d v5.0.0 6.添加带有备注信息的tag git tag v5.…

linux系统Jenkins的安装

Jenkins安装 安装上传安装包解压包首次登录要去服务器查看密码&#xff0c;更改密码选择需要安装的插件设置Admin用户和密码安装完成 安装 上传安装包 上传 jdk17 tomcat jenkins.war的安装包 . 上传 tomcat安装包解压包 解压jdk tar xf jdk-11.0.18_linux-x64_bin.tar.gz解…

Golang embed 库全面解析:从基础到高级应用

Golang embed 库全面解析&#xff1a;从基础到高级应用 引言Golang的 embed&#xff1a;简化资源管理提升可移植性与便利性适用场景的拓展 embed 库的基本概念embed 库的工作原理使用 embed 的基本语法访问嵌入资源的方法embed 的限制 如何使用 embed嵌入单个文件嵌入整个目录结…

python 3.11中安装sympy(符号工具包)

1.python环境&#xff1a; 2.安装遇到问题&#xff1a; 其中一台Win10系统上&#xff1a; … 另一台Win10系统上&#xff1a; 3.升级pip cmd命令行中&#xff0c;执行如下命令&#xff1a; python.exe -m pip installl --upgrade pip 4.再次安装sympy cmd命令行中&…

前端架构: 脚手架包管理工具之lerna的全流程开发教程

Lerna 1 &#xff09;文档 Lerna 文档 https://www.npmjs.com/package/lernahttps://lerna.js.org [请直达这个链接] 使用 Lerna 帮助我们做包管理&#xff0c;并不复杂&#xff0c;中间常用的命令并不是很多这里是命令直达&#xff1a;https://lerna.js.org/docs/api-referen…

深度学习--神经网络基础

神经网络 人工神经网络&#xff08; Artificial Neural Network &#xff0c; 简写为 ANN &#xff09;也简称为神经网络&#xff08; NN &#xff09;&#xff0c;是一种模仿生物神经网络结构和 功能的计算模型 。人脑可以看做是一个生物神经网络&#xff0c;由众多的 神经元…

刷题第2天(中等题):LeetCode59--螺旋矩阵--考察模拟能力(边界条件处理)

LeetCode59: 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]]示例 2&#xff1a; 输入&#xff1a…

高刷显示器 - HKC VG253KM

&#x1f525;&#x1f525; 今天来给大家揭秘一款电竞神器 - HKC VG253KM 高刷电竞显示器&#xff01;这款显示器可是有着雄鹰展翅般的设计灵感&#xff0c;背后的大鹏展翅鹰翼图腾让人过目难忘。那么&#xff0c;这款显示器到底有哪些过人之处呢&#xff1f;一起来看看吧&…

Automated Testing for LLMOps 01:使用CircleCI进行持续集成CI

Automated Testing for LLMOps 这是学习https://www.deeplearning.ai/short-courses/automated-testing-llmops/ 这门课的笔记 Learn how LLM-based testing differs from traditional software testing and implement rules-based testing to assess your LLM application. …

2024年腾讯云4核8G12M配置的轻量服务器同时支持多大访问量?

腾讯云4核8G服务器支持多少人在线访问&#xff1f;支持25人同时访问。实际上程序效率不同支持人数在线人数不同&#xff0c;公网带宽也是影响4核8G服务器并发数的一大因素&#xff0c;假设公网带宽太小&#xff0c;流量直接卡在入口&#xff0c;4核8G配置的CPU内存也会造成计算…

深入理解网络通信基本原理和tcp/ip协议

深入理解网络通信基本原理和tcp/ip协议 一、计算机网络体系1&#xff0c;计算机网络体系结构2&#xff0c;网络中数据传输2.1&#xff0c;浏览器中输入一个url的执行流程2.2&#xff0c;数据在网络中是的传输流程 3&#xff0c;三次握手和四次挥手3.1&#xff0c;三次握手3.1.1…

推荐一款桌面端redis连接工具, redis desktop manager替代品——another redis desktop manager

下载地址 Another Redis Desktop Manager | 更快、更好、更稳定的Redis桌面(GUI)管理客户端&#xff0c;兼容Windows、Mac、Linux&#xff0c;性能出众&#xff0c;轻松加载海量键值 封面对比 对比redis desktop manager &#xff0c;ui上有巨大的改进 但是redis desktop ma…

【基于Ubuntu20.04的Autoware.universe安装过程】方案一:虚拟机 | 详细记录 | Vmware | 全过程图文 by.Akaxi

目录 一、Autoware.universe背景 二、虚拟机配置 三、Ubuntu20.04安装 四、GPU显卡安装 五、ROS2-Galactic安装 六、ROS2-dev-tools安装 七、rmw-implementation安装 八、pacmod安装 九、autoware-core安装 十、autoware universe dependencies安装 十一、安装pre-c…