JavaScript+PHP实现视频文件分片上传的示例代码

发布:smiling　来源: PHP粉丝网　添加日期：2024-04-20 18:20:09　浏览: 评论：0　

视频文件分片上传，整体思路是利用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' => '缺少文件名'

        ));

    }

?>