快捷導(dǎo)航

JavaScript+PHP實(shí)現(xiàn)視頻文件分片上傳的示例代碼

更新時(shí)間：2024年02月25日 10:19:14 作者：TANKING-

這篇文章主要介紹了基于JavaScript+PHP實(shí)現(xiàn)視頻文件分片上傳,視頻文件分片上傳,整體思路是利用JavaScript將文件切片,然后循環(huán)調(diào)用上傳接口 upload.php 將切片上傳到服務(wù)器,文中有詳細(xì)代碼供大家參考,需要的朋友可以參考下

摘要

視頻文件分片上傳，整體思路是利用JavaScript將文件切片，然后循環(huán)調(diào)用上傳接口 upload.php 將切片上傳到服務(wù)器。這樣將由原來(lái)的一個(gè)大文件上傳變?yōu)槎鄠€(gè)小文件同時(shí)上傳，節(jié)省了上傳時(shí)間，這就是文件分片上傳的其中一個(gè)好處。

在這里插入圖片描述

上代碼

index.html

通過(guò)前端將文件對(duì)象切分成多個(gè)小塊，然后依次將這些小塊的文件對(duì)象上傳到服務(wù)器。

<!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實(shí)現(xiàn)視頻文件分片上傳</p>
        <div class="video_upload">
            <span class="text"> + </span>
            <input type="file" id="fileInput" accept="video/*">
        </div>
		<button id="uploadButton" style="display:none;">開(kāi)始上傳</button>
		<p id="ret"></p>

		<script>
		
			// 定義全局變量
			let videoFile = null;
			let chunkSize = 1024 * 1024; // 1MB 分片大小
			
			// 當(dāng)文件選擇框的值改變時(shí)觸發(fā)該函數(shù)
			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("請(qǐng)選擇一個(gè)視頻文件");
			        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); // 從文件中截取一個(gè)分片
			
			        // 使用FormData來(lái)構(gòu)建multipart/form-data格式的請(qǐng)求體
			        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('文件上傳完成');
			
			    // 上傳完成后發(fā)送通知給服務(wù)器進(jìn)行合并
			    notifyServerForMerge(fileName);
			}
			
			// 發(fā)送通知給服務(wù)器進(jìn)行合并
			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('無(wú)法通知服務(wù)器進(jìn)行合并');
			        }
			        
			        const res_data = await response.json();
			
			        console.log('已通知服務(wù)器進(jìn)行合并');
			        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('通知服務(wù)器進(jìn)行合并時(shí)發(fā)生錯(cuò)誤: ', error.message);
			    }
			}
			
			// 注冊(cè)文件選擇框的change事件
			document.getElementById('fileInput').addEventListener('change', handleFileSelect);
			
			// 注冊(cè)上傳按鈕的click事件
			document.getElementById('uploadButton').addEventListener('click', uploadFile);
		</script>

	</body>
</html>

upload.php

這個(gè)是用于接收前端傳過(guò)來(lái)的每一段分片，然后上傳到 uploads 文件夾，上傳之后就是一段一段的小分片。

<?php

    // 設(shè)置允許跨域訪問(wèn)
    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']; // 獲取文件名
        
        // 檢查是否有錯(cuò)誤
        if ($error !== UPLOAD_ERR_OK) {
            http_response_code(500);
            echo json_encode(array(
                'error' => '文件上傳失敗'
            ));
            exit();
        }
        
        // 設(shè)置存儲(chǔ)目錄和文件名
        $uploadDir = './uploads/';
        $filePath = $uploadDir . $fileName . '.' . $chunkIndex;
        
        // 將分片移動(dòng)到指定的目錄
        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

這個(gè)是用來(lái)合并分片的，當(dāng)前端完成上傳分片的操作，前端會(huì)異步告訴服務(wù)器你已經(jīng)完成所有分片的上傳，接下來(lái)將每個(gè)分片名告訴合并程序完成所有分片的合并，合并之后就是一個(gè)完整的視頻文件。

<?php

    // 設(shè)置允許跨域訪問(wèn)
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: POST");
    header("Content-Type: application/json");
    
    // 獲取請(qǐng)求體中的文件名
    $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) {
            
            // 所有分片都已上傳，開(kāi)始合并
            $finalFile = fopen($finalFilePath, 'wb');
            
            // 逐個(gè)讀取分片并寫(xiě)入最終文件
            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' => '沒(méi)有上傳的分片'
            ));
        }
    } else {
        
        http_response_code(400);
        echo json_encode(array(
            'error' => '缺少文件名'
        ));
    }
?>