PHP视频拖拽上传实现方法

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 处理拖拽和上传：

const dropArea = document.getElementById('drop-area');
const progressBar = document.getElementById('progress-bar');
// 阻止默认行为
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, e => e.preventDefault(), false);
});
// 拖入样式反馈
['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, () => {
dropArea.style.borderColor = '#007cba';
}, false);
});
['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, () => {
dropArea.style.borderColor = '#ccc';
}, false);
});
// 处理文件拖放
dropArea.addEventListener('drop', e => {
const files = e.dataTransfer.files;
if (files.length > 0) {
uploadFile(files[0]);
}
});
// 上传函数
function uploadFile(file) {
// 校验是否为视频
if (!file.type.startsWith('video/')) {
alert('请上传视频文件');
return;
}
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
$uploadDir = 'uploads/';
// 确保上传目录存在
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0755, true);
}
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['video'])) {
$file = $_FILES['video'];
// 检查错误
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' =&gt; '上传成功', 'file' =&gt; $filePath]);
} else {
    http_response_code(500);
    echo '保存文件失败';
}
} else {
http_response_code(400);
echo '无效请求';
}
?>