PHP实现视频拖拽上传功能_PHP实现视频拖拽上传功能-php教程-PHP中文网

PHP实现视频拖拽上传功能_PHP实现视频拖拽上传功能

雪夜

发布： 2025-10-14 20:31:01

原创

450人浏览过

答案：通过HTML和JavaScript实现拖拽交互，PHP处理文件上传。前端创建拖拽区域并监听事件，校验后上传视频文件；后端接收文件，进行格式、大小等安全检查，保存至服务器。结合前后端协作，可实现流畅且安全的视频拖拽上传功能。

php实现视频拖拽上传功能_php实现视频拖拽上传功能

要实现视频的拖拽上传功能，PHP 主要负责处理前端传来的文件数据，而拖拽交互部分由 HTML 和 JavaScript 完成。整个流程包括前端监听拖拽事件、读取文件并上传，后端使用 PHP 接收并保存文件，同时可进行格式、大小等校验。

前端：HTML + JavaScript 实现拖拽区域

创建一个用于拖拽上传的区域，通过监听 dragover 和 drop 事件来接收用户拖入的视频文件。

HTML 结构：

<div id="drop-area" style="border: 2px dashed #ccc; padding: 20px; text-align: center;">
    拖拽视频文件到这里上传
</div>
<progress id="progress-bar" value="0" max="100" style="display:none;width:100%;"></progress>

登录后复制

JavaScript 处理拖拽和上传：

立即学习“PHP免费学习笔记（深入）”；

模力视频

模力视频 - AIGC视频制作平台 | AI剪辑 | 云剪辑 | 海量模板

查看详情

const dropArea = document.getElementById('drop-area');
const progressBar = document.getElementById('progress-bar');
<p>// 阻止默认行为
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, e => e.preventDefault(), false);
});</p><p>// 拖入样式反馈
['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, () => {
dropArea.style.borderColor = '#007cba';
}, false);
});</p><p>['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, () => {
dropArea.style.borderColor = '#ccc';
}, false);
});</p><p>// 处理文件拖放
dropArea.addEventListener('drop', e => {
const files = e.dataTransfer.files;
if (files.length > 0) {
uploadFile(files[0]);
}
});</p><p>// 上传函数
function uploadFile(file) {
// 校验是否为视频
if (!file.type.startsWith('video/')) {
alert('请上传视频文件');
return;
}</p><pre class='brush:php;toolbar:false;'>const formData = new FormData();
formData.append('video', file);

const xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);

// 上传进度
xhr.upload.onprogress = e => {
    if (e.lengthComputable) {
        progressBar.style.display = 'block';
        const percent = (e.loaded / e.total) * 100;
        progressBar.value = percent;
    }
};

xhr.onload = () => {
    if (xhr.status === 200) {
        alert('上传成功！');
        progressBar.style.display = 'none';
    } else {
        alert('上传失败：' + xhr.responseText);
    }
};

xhr.send(formData);

登录后复制

}

后端：PHP 处理文件上传

在 upload.php 中接收上传的视频文件，进行安全检查并存储。

<?php
$uploadDir = 'uploads/';
<p>// 确保上传目录存在
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0755, true);
}</p><p>if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['video'])) {
$file = $_FILES['video'];</p><pre class='brush:php;toolbar:false;'>// 检查错误
if ($file['error'] !== UPLOAD_ERR_OK) {
    http_response_code(400);
    echo '文件上传出错：' . $file['error'];
    exit;
}

// 校验 MIME 类型
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mimeType = finfo_file($finfo, $file['tmp_name']);
finfo_close($finfo);

if (!str_starts_with($mimeType, 'video/')) {
    http_response_code(400);
    echo '仅允许上传视频文件';
    exit;
}

// 限制文件大小（例如 500MB）
if ($file['size'] > 500 * 1024 * 1024) {
    http_response_code(400);
    echo '文件太大，最大支持 500MB';
    exit;
}

// 生成唯一文件名防止覆盖
$extension = pathinfo($file['name'], PATHINFO_EXTENSION);
$newName = uniqid('video_') . '.' . $extension;
$filePath = $uploadDir . $newName;

// 移动到目标目录
if (move_uploaded_file($file['tmp_name'], $filePath)) {
    echo json_encode(['message' => '上传成功', 'file' => $filePath]);
} else {
    http_response_code(500);
    echo '保存文件失败';
}

登录后复制

} else { http_response_code(400); echo '无效请求'; } ?>