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.mzph.cn/news/701004.shtml

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

相关文章

神经网络系列---回归问题和分类问题

文章目录 回归问题和分类问题回归问题&#xff1a;分类问题&#xff1a;多分类问题&#xff1a;排序问题&#xff1a;自定义损失函数&#xff1a; 回归问题和分类问题 回归问题&#xff1a; 回归问题是一种预测连续数值输出的任务。在这种问题中&#xff0c;模型的目标是根据…

整理ArrayList和LinkedList中的方法

ArrayList 和 LinkedList 是 Java 中两种常用的列表&#xff08;List&#xff09;实现。它们提供了许多相同的方法&#xff0c;但由于内部实现的不同&#xff0c;这些方法的性能可能会有所不同。以下是一些常用的方法&#xff1a; 添加元素 add(E e): 在列表的末尾添加一个元…

【黑马程序员】2、TypeScript介绍_黑马程序员前端TypeScript教程,TypeScript零基础入门到实战全套教程

课程地址&#xff1a;【黑马程序员前端TypeScript教程&#xff0c;TypeScript零基础入门到实战全套教程】 https://www.bilibili.com/video/BV14Z4y1u7pi/?share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 目录 2、TypeScript初体验 2.1 安装编译TS的工…

mysql数据库 - 统诉

1、DDL - 数据库操作 show databases; create database 数据库名 use 数据库名 select database() drop database 数据库名 2、DDL- 表操作 show tables; create table desc 表名 show create table 表名 alter table 表名 add/modify/change/rename drop table 表名 3、DML …

hbuilderx创建、运行uni-app

创建uni-app 在点击工具栏里的文件 -> 新建 -> 项目&#xff1a; 选择uni-app类型&#xff0c;输入工程名&#xff0c;选择模板&#xff0c;点击创建&#xff0c;即可成功创建。 uni-app自带的模板有 Hello uni-app &#xff0c;是官方的组件和API示例。还有一个重要模…

解决easyExcel模板填充时转义字符\{xxx\}失效

正常我们在使用easyExcel进行模板填充时&#xff0c;定义的变量会填充好对应的实际数据&#xff0c;未定义的变量会被清空&#xff0c;但是如果这个未定义的变量其实是模板的一部分&#xff0c;那么清空了就出错了。 在这张图里&#xff0c;上面的是模板填充后导出的文件&…

Guitar Pro8.2吉他软件2024中文版功能特点介绍

Guitar Pro 8.2是一款功能强大的吉他乐谱软件&#xff0c;专为吉他手、音乐制作人和音乐爱好者设计。它提供了丰富的功能&#xff0c;帮助用户轻松创建、编辑、打印和分享吉他乐谱。以下是Guitar Pro 8.2的主要功能特点&#xff1a; Guitar Pro 2024 win-安装包下载如下&#x…

Java开发手册

技术栈 数据库 事务 概念 一组操作&#xff0c;要么都执行&#xff0c;要么都不执行 原理 事务提交后&#xff0c;发生变更的数据先更新到Buffer Pool缓冲区里&#xff0c;然后再合适的时机再持久化到磁盘为了防止持久化过程中数据库宕机&#xff0c;导致数据丢失&#xf…

MATLAB中,如何捕获和处理异常?如何在MATLAB中自定义错误消息?在MATLAB中,error函数和warning函数有什么区别?

MATLAB中&#xff0c;如何捕获和处理异常&#xff1f; 在MATLAB中&#xff0c;捕获和处理异常通常使用try-catch语句。try块包含可能引发异常的代码&#xff0c;而catch块则包含当异常发生时执行的代码。以下是如何在MATLAB中捕获和处理异常的基本步骤&#xff1a; 使用try关键…

华为HCIP Datacom H12-831 卷24

多选题 1、如图所示&#xff0c;某园区部署OSPF实现网络互通&#xff0c;其中Area1部署为NSSA区域。某工程师为了实现R1访问R4的环回口地址&#xff0c;在R4的OSPF进程中引入直连路由。以下关于该场景的描述,错误的有哪些项? A、在R4引入直连路由后&#xff0c;R1通过转换后的…

DFS排列组合问题

文章目录 DFS排列组合问题排列组合问题的标准模板排列LeetCode46全排列题目描述代码 LeetCode47全排列Ⅱ题目描述代码 组合LeetCode77组合题目描述代码 LeetCode39组合总和题目描述代码 LeetCode40组合总和Ⅱ题目描述代码 LeetCode216组合总和Ⅲ题目描述代码 DFS排列组合问题 …

【鸿蒙开发】第十四章 Stage模型应用组件-任务Mission

1 任务(Mission)管理场景 任务&#xff08;Mission&#xff09;管理相关的基本概念如下&#xff1a; AbilityRecord&#xff1a;系统服务侧管理一个UIAbility实例的最小单元&#xff0c;对应一个应用侧的UIAbility组件实例。系统服务侧管理UIAbility实例数量上限为512个。 Mi…

Day2 JS基础

2.1 运算符 赋值运算符 一元运算符 -- <script>let h20let kh hconsole.log(h) //22console.log(k) //42let i1console.log(i i i) //7 ​// 递增运算符&#xff1a;var a8aconsole.log(a) //9 ​var num10var bnumconsole.log(b) //10</script> 比较运…

C++面试:CPU的上下文切换、中断处理与系统调度

目录 一、上下文切换&#xff08;Context Switching&#xff09; 1. 切换基础 2. 减少切换 使用线程池 使用异步编程 使用共享内存 二、中断处理&#xff08;Interrupt Handling&#xff09; 中断基础 中断发生过程 三、系统调度&#xff08;Scheduling&#xff09; …

Code-Audit(代码审计)习题记录6-7

介绍&#xff1a; 自己懒得搭建靶场了&#xff0c;靶场地址是 GitHub - CHYbeta/Code-Audit-Challenges: Code-Audit-Challenges为了方便在公网练习&#xff0c;可以随地访问&#xff0c;本文所有的题目均来源于网站HSCSEC-Code Audit 6、习题6 题目内容如下&#xff1a; 源代…

探索水下低光照图像检测性能,基于YOLOv5全系列【n/s/m/l/x】参数模型开发构建海底生物检测识别分析系统

海底这类特殊数据场景下的检测模型开发相对来说比较少&#xff0c;在前面的博文中也有一些涉及&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《尝试探索水下目标检测&#xff0c;基于yolov5轻量级系列模型n/s/m开发构建海底生物检测系统》 《基于YOLOv5C3CBAMCBA…

【数据结构(顺序表)】

一、什么是数据结构? 数据结构是由“数据”和“结构”两词组合而来。 什么是数据&#xff1f;常见的数值1、2、3、4.....、教务系统里保存的用户信息&#xff08;姓名、性别、年龄、学历等等&#xff09;、网页里肉眼可以看到的信息&#xff08;文字、图片、视频等等&#xff…

【分布式事务 XA模式】MySQL XA模式详解

MYSQL中的XA事务 写在前面1. XA事务的基本原理2. MySQL XA事务操作 写在前面 MySQL 的 5.0.3 版本开始支持XA分布式事务&#xff0c;并且只有innoDB存储引擎支持XA事务。 1. XA事务的基本原理 XA事务本质上是一种基于两阶段提交的分布式事务&#xff0c;分布式事务可以理解成…

[LWC] Components Communication

目录 Overview ​Summary Sample Code 1. Parent -> Child - Public Setter / Property / Function a. Public Property b. Public getters and setters c. Public Methods 2. Child -> Parent - Custom Event 3. Unrelated Components - LMS (Lightning Message…

拍立淘助力电商新趋势:以图搜图购物成主流

拍立淘&#xff08;或称为“以图搜图”&#xff09;是一种基于图像识别的购物搜索技术&#xff0c;它允许用户通过上传图片或拍摄照片来搜索相似的商品。这一功能为电商领域带来了新的购物体验&#xff0c;使得搜索更加直观和便捷。 为了实现这样的功能&#xff0c;需要后端支…