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

news2024/11/24 6:41:54

摘要

视频文件分片上传,整体思路是利用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.coloradmin.cn/o/1469174.html

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

相关文章

从故宫修建看「软件物料清单」的重要性 @安全历史01

故宫&#xff0c;这座中国传统文化的重要代表和象征性建筑已屹立近600年&#xff0c;是世界上现存规模最大、保存最为完整的木质结构古建筑之一。 故宫之所以能至今保存完好&#xff0c;除持续保护和修缮外&#xff0c;其使用的木材和砖石等材料也经过了精挑细选&#xff0c;保…

C++基础学习——哈希表的封装

目录 ​编辑 一&#xff0c;实现一个可封装的哈希表 1&#xff0c;哈希表的节点 2&#xff0c;哈希表的成员 3&#xff0c;哈希表成员方法的实现 4&#xff0c;迭代器的实现 5&#xff0c;在哈希表中加入迭代器 二&#xff0c;封装哈希表 1&#xff0c;unorder_map封装 2…

吴恩达deeplearning.ai:矩阵运算代码实战

神经网络向量化指的是将输入数据转化为向量形式&#xff0c;以便于神经网络的处理。向量化的作用包括以下几点&#xff1a; 提高计算效率&#xff1a;使用向量化的输入数据可以进行并行计算&#xff0c;加速神经网络的训练和推断过程。 减少存储空间&#xff1a;向量化可以将…

一种确定FET小信号等效电路的新方法

来源&#xff1a;A New Method for Determining the FET Small-Signal Equivalent Circuit&#xff08;88年 TMTT&#xff09; 摘要 - 提出了一种确定FET&#xff08;场效应晶体管&#xff09;小信号等效电路的新方法。该方法包括在低频段直接测定器件的外在和内在小信号参数。…

STM32_DS18B20_1_芯片简介及初始化配置

DS18B20介绍 DS18B20数字温度计提供9位到12位摄氏度的温度测量&#xff0c;并具有非易失性&#xff0c;用户可编程的上下触发点的报警功能。DS18B20通过1线总线进行通信&#xff0c;根据定义&#xff0c;该总线只需要一条数据线&#xff0c;即可与中央微处理器进行通信…

给定一个边与边可能相交的多边形,求它的轮廓线

大家好&#xff0c;我是前端西瓜哥。 最近遇到一个需求&#xff0c;给定一个多边形&#xff08;边与边可能相交&#xff09;&#xff0c;求这个多边形的轮廓线。 需要注意的是&#xff0c;轮廓线多边形内不能有空洞&#xff0c;使用的不是常见的非零绕数规则&#xff08;nonze…

2.23 Qt day4 事件机制+定时器事件+键盘事件+鼠标事件

思维导图&#xff1a; 做一个闹钟&#xff0c;在行编辑器里输入定闹钟的时间&#xff0c;时间到了就语音播报文本里的内容&#xff0c;播报五次 widget.h&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QDebug>//输出类 #include<…

JSON(javaScript Object Notation,Js对象标记)—我耀学IT

Json是一种轻量级的数据交换格式&#xff0c;目前使用非常广泛&#xff0c;是一种轻量级的数据交换格式。易于人阅读和编写&#xff0c;可以在多种语言之间进行数据交换 。同时也易于机器解析和生成 1.1json的值: 值可以是对象、数组、数字、字符串或者三个字面值(false、nul…

990-05产品经理:为什么商业价值是 IT 成功的关键

In today’s digital era, CIOs must shift(转移) their priorities from cost cutting to driving revenue(收入), and from process engineering to exploiting data if they want to achieve a set of broader business outcomes. Furthermore, understanding how to measur…

Mac OS 下载安装与破解Typora

文章目录 下载Typora破解Typora1. 进入安装目录2. 找到并打开Lincense文件3. 修改激活状态4. 重新打开Typora 下载Typora 官网地址&#xff1a;typora官网 下载最新Mac版&#xff0c;正常安装即可 破解Typora 打开typora,可以看到由于未激活&#xff0c;提示使用期限还剩下15…

09 呼吸灯

呼吸灯简介 呼吸灯实际展示的效果就是一个 LED 灯的亮度由亮到暗&#xff0c;再由暗到亮的变化过程&#xff0c;并且该过程是循环往复的&#xff0c;像呼吸一样那么有节奏。 呼吸灯通常是采用 PWM(Pulse Width Modulation&#xff0c;即脉冲宽度调制) 的方式实现&#xff0c;在…

超强随机短视频源码自带视频带支付源码

1.开启是否连续自动播放 2.支持手动点击看下一个 3.支持引流跳官方地址&#xff0c;产品地址&#xff0c;可以设置跳转地址 4.简洁大气&#xff0c;支持网站基础信息设置 5.支持设置定时多少时间弹广告 6.支持PC手机设置弹广告图片与点击后跳转链接 源码免费下载地址专业…

【Unity】双击C#脚本文件以单个文件打开(Visual Studio)、父类找不到、引用找不到、无法跳转等问题

问题&#xff1a;新安装一个Unity后&#xff0c;突然发现在工程里双击C#脚本&#xff0c;会一个一个打开&#xff0c;虽然也是用VS软件打开了&#xff0c;但是它无法被正确识别为Unity工程的C#脚本&#xff0c;也就是说所有命名空间无效&#xff0c;因为没关联上整个工程的解决…

OSCP靶场--Slort

OSCP靶场–Slort 考点(1.php 远程文件包含 2.定时任务提权) 1.nmap扫描 ┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.178.53 -sV -sC -p- --min-rate 5000 Starting Nmap 7.92 ( https://nmap.org ) at 2024-02-24 04:37 EST Nmap scan report for 192.168.178.53 …

Windows安装PHP及在VScode中配置插件,使用PHP输出HelloWorld

安装PHP PHP官网下载地址(8.3版本)&#xff1a;PHP For Windows&#xff1a;二进制文件和源代码发布 点击下载.zip格式压缩包&#xff1a; 历史版本在Old archives中下载。推荐在Documentation download中下载官方文档&#xff0c;方便学习。 下载完成后在一个顺眼的地方解压压…

Spring Boot 项目集成camunda流程引擎

使用camunda开源工作流引擎有&#xff1a;通过docker运行、使用springboot集成、部署camunda发行包、基于源代码编译运行等多种方式。 其中&#xff0c;通过源代码编译运行的方式最为复杂&#xff0c;具体参考&#xff1a;https://lowcode.blog.csdn.net/article/details/1362…

vivado VHDL Objects、VHDL实体描述

VHDL对象包括&#xff1a;信号、变量、常量和运算符。 信号 在中声明VHDL信号&#xff1a; •体系结构声明部分&#xff1a;在该体系结构内的任何位置使用VHDL信号。 •一个块&#xff1a;在该块中使用VHDL信号。 使用<信号分配运算符分配VHDL信号。 signal sig1 : std…

企业计算机服务器中了malloxx勒索病毒怎么办?Malloxx勒索病毒解密数据恢复

网络技术的不断更新与发展&#xff0c;为企业的发展提供了强有力数据支撑&#xff0c;在企业的生产运营过程中&#xff0c;企业数据扮演着重要的角色&#xff0c;通过企业数据可以更好地总结调整企业的规划发展方向与日常数据统计&#xff0c;但利用网络技术的支撑就要防范网络…

软考41-上午题-【数据库】-关系代数运算3-外连接

一、外连接 连接的拓展&#xff0c;处理由于连接运算而缺失的信息。 1-1、回顾自然连接 1-2、左外连接 示例&#xff1a; 左边的表&#xff0c;数值是全的 1-3、右外连接 示例&#xff1a; 右边的表&#xff0c;数值是全的 1-4、全外连接 示例&#xff1a; 自然连接左外连接…

Sora:颠覆性AI视频生成工具

Sora是一款基于人工智能&#xff08;AI&#xff09;技术的视频生成工具&#xff0c;它彻底改变了传统视频制作的模式&#xff0c;为创作者提供了高效、便捷、高质量的视频内容生成方式。通过深度学习和自然语言处理等先进技术&#xff0c;Sora实现了从文字描述到视频画面的自动…