php 文件上传视频,蘑菇vps,筋斗云vps安装教程,海外vps 国内,安卓vps软件

🗣 Wd提问: php 文件上传视频

🤖 Ai回答:
PHP视频文件上传功能实现

下面我将创建一个完整的视频文件上传系统，包括前端界面和后端处理逻辑。

思路分析
前端：创建简洁的文件上传表单
后端：处理文件上传、验证文件类型和大小、移动文件到安全位置
安全考虑：防止恶意文件上传、限制文件类型和大小
用户体验：显示上传进度、成功/错误反馈

实现代码

html
<!DOCTYPE html
<html lang=zh-CN
<head
<meta charset=UTF-8
<meta name=viewport content=width=device-width, initial-scale=1.0
<title视频上传系统</title
<style
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background: linear-gradient(135deg, 1a2a6c, b21f1f, fdbb2d);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.container {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 600px;
padding: 30px;
}

h1 {
color: 333;
text-align: center;
margin-bottom: 25px;
position: relative;
}

h1::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: linear-gradient(to right, 1a2a6c, fdbb2d);
margin: 10px auto;
border-radius: 2px;
}

.upload-container {
border: 2px dashed 3498db;
border-radius: 10px;
padding: 40px 20px;
text-align: center;
transition: all 0.3s;
background-color: f8f9fa;
margin-bottom: 25px;
position: relative;
}

.upload-container.drag-over {
background-color: e3f2fd;
border-color: 2980b9;
}

.upload-icon {
font-size: 60px;
color: 3498db;
margin-bottom: 15px;
}

.upload-text {
font-size: 18px;
color: 555;
margin-bottom: 20px;
}

.browse-btn {
background: linear-gradient(to right, 3498db, 2980b9);
color: white;
padding: 12px 30px;
border-radius: 50px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
border: none;
transition: all 0.3s;
display: inline-block;
}

.browse-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.file-input {
display: none;
}

.selected-file {
margin-top: 20px;
padding: 15px;
background-color: e1f5fe;
border-radius: 8px;
display: none;
}

.progress-container {
margin: 25px 0;
display: none;
}

.progress-bar {
height: 20px;
background-color: e0e0e0;
border-radius: 10px;
overflow: hidden;
}

.progress {
height: 100%;
background: linear-gradient(to right, 4CAF50, 8BC34A);
width: 0%;
transition: width 0.3s;
}

.progress-text {
text-align: center;
margin-top: 10px;
font-size: 14px;
color: 555;
}

.upload-btn {
background: linear-gradient(to right, 27ae60, 2ecc71);
color: white;
padding: 14px 40px;
border-radius: 50px;
cursor: pointer;
font-size: 18px;
font-weight: 600;
border: none;
display: block;
width: 100%;
max-width: 300px;
margin: 20px auto;
transition: all 0.3s;
}

.upload-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4);
}

.upload-btn:disabled {
background: bdc3c7;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

.message {
padding: 15px;
border-radius: 8px;
margin-top: 20px;
text-align: center;
display: none;
}

.success {
background-color: d4edda;
color: 155724;
}

.error {
background-color: f8d7da;
color: 721c24;
}

.file-info {
margin-top: 10px;
font-size: 14px;
color: 666;
}

.file-size {
font-weight: 600;
}

.file-type {
font-style: italic;
}

.requirements {
margin-top: 25px;
padding: 15px;
background-color: f1f8e9;
border-radius: 8px;
font-size: 14px;
color: 555;
}

.requirements h3 {
margin-bottom: 10px;
color: 2e7d32;
}

.requirements ul {
padding-left: 20px;
}

.requirements li {
margin-bottom: 5px;
}
</style
</head
<body
<div class=container
<h1视频上传系统</h1

<div class=upload-container id=dropArea
<div class=upload-icon📁</div
<p class=upload-text拖放视频文件到此处或</p
<button class=browse-btn选择文件</button
<input type=file id=fileInput class=file-input accept=video/*
</div

<div class=selected-file id=selectedFile
已选择: <span id=fileName</span
<div class=file-info
大小: <span id=fileSize class=file-size</span |
类型: <span id=fileType class=file-type</span
</div
</div

<div class=progress-container id=progressContainer
<div class=progress-bar
<div class=progress id=progressBar</div
</div
<div class=progress-text上传中: <span id=progressText0%</span</div
</div

<button class=upload-btn id=uploadBtn disabled上传视频</button

<div class=message id=message</div

<div class=requirements
<h3上传要求</h3
<ul
<li支持格式: MP4, AVI, MOV, WMV, FLV, MKV</li
<li最大文件大小: 100 MB</li
<li文件名不能包含特殊字符</li
<li视频时长不超过10分钟</li
</ul
</div
</div

<script
document.addEventListener('DOMContentLoaded', function() {
const dropArea = document.getElementById('dropArea');
const fileInput = document.getElementById('fileInput');
const browseBtn = document.querySelector('.browse-btn');
const selectedFile = document.getElementById('selectedFile');
const fileName = document.getElementById('fileName');
const fileSize = document.getElementById('fileSize');
const fileType = document.getElementById('fileType');
const uploadBtn = document.getElementById('uploadBtn');
const progressContainer = document.getElementById('progressContainer');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
const messageDiv = document.getElementById('message');

// 点击按钮触发文件选择
browseBtn.addEventListener('click', () = {
fileInput.click();
});

// 文件选择变化
fileInput.addEventListener('change', handleFileSelection);

// 拖放功能
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName = {
dropArea.addEventListener(eventName, prevent

Ai作答

📣 商家广告：