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è)置允許跨域訪(fǎng)問(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è)置允許跨域訪(fǎng)問(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' => '缺少文件名'
));
}
?>
程序目錄
請(qǐng)自行創(chuàng)建 uploads 目錄。
以上就是JavaScript+PHP實(shí)現(xiàn)視頻文件分片上傳的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于JavaScript+PHP視頻文件上傳的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
解決php使用異步調(diào)用獲取數(shù)據(jù)時(shí)出現(xiàn)(錯(cuò)誤c00ce56e導(dǎo)致此項(xiàng)操作無(wú)法完成)
本篇文章是對(duì)php中使用異步調(diào)用獲取數(shù)據(jù)時(shí)出現(xiàn)(由于出現(xiàn)錯(cuò)誤c00ce56e而導(dǎo)致此項(xiàng)操作無(wú)法完成)的解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
這篇文章主要介紹了深入探究PHP的多進(jìn)程編程方法,同時(shí)介紹了Windows系統(tǒng)下的多線(xiàn)程嘗試,是PHP并發(fā)實(shí)現(xiàn)方面的重要內(nèi)容,需要的朋友可以參考下2015-08-08
php多進(jìn)程應(yīng)用場(chǎng)景實(shí)例詳解
這篇文章主要介紹了php多進(jìn)程應(yīng)用,結(jié)合具體實(shí)例形式詳細(xì)分析了php多進(jìn)程模塊依賴(lài)pcntl擴(kuò)展安裝、使用相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-07-07
解析PHP中的內(nèi)存管理,PHP動(dòng)態(tài)分配和釋放內(nèi)存
本篇文章是對(duì)PHP中的內(nèi)存管理,PHP動(dòng)態(tài)分配和釋放內(nèi)存進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
php進(jìn)行支付寶開(kāi)發(fā)中return_url和notify_url的區(qū)別分析
這篇文章主要介紹了php進(jìn)行支付寶開(kāi)發(fā)中return_url和notify_url的區(qū)別,較為詳細(xì)的分析了return_url和notify_url的區(qū)別與用法,需要的朋友可以參考下2014-12-12
PHP將Excel導(dǎo)入數(shù)據(jù)庫(kù)及數(shù)據(jù)庫(kù)數(shù)據(jù)導(dǎo)出至Excel的方法
這篇文章主要介紹了PHP將Excel導(dǎo)入數(shù)據(jù)庫(kù)及數(shù)據(jù)庫(kù)數(shù)據(jù)導(dǎo)出至Excel的方法,涉及php操作數(shù)據(jù)庫(kù)及Excel的相關(guān)技巧,需要的朋友可以參考下2015-06-06
php 無(wú)法加載mysql的module的時(shí)候的配置的解決方案引發(fā)的思考
今天配置php 的時(shí)候，發(fā)現(xiàn)沒(méi)配起mysql ，wordpress提示我需要 mysql 的module之后上google搜索，大多數(shù)都是說(shuō)php.ini 沒(méi)加載起2012-01-01
這篇文章主要介紹了PHP代碼重構(gòu)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了php代碼重構(gòu)的概念、原理、相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2018-04-04
php在頁(yè)面中調(diào)用fckeditor編輯器的方法
fckeditor編輯器的代碼可以寫(xiě)成一個(gè)函數(shù)或者類(lèi)別，直接調(diào)用，不用每次都要寫(xiě)那么多代碼！2011-06-06
這篇文章主要介紹了PHP操作MySQL事務(wù)的方法,以實(shí)例的形式較為詳細(xì)的分析了ACID特征，具有不錯(cuò)的參考借鑒價(jià)值,需要的朋友可以參考下2014-11-11