|
阅读：11回复：0
45343
<!DOCTYPE html>
<html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>PHP 文件上传与预览</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 2rem; font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; } .upload-container { margin-bottom: 2rem; padding: 1.5rem; border: 2px dashed #ccc; border-radius: 8px; } #file-input { margin-bottom: 1rem; } #preview-area { margin: 1rem 0; min-height: 100px; } .preview-item { margin: 1rem 0; } .preview-item img, .preview-item video { max-width: 100%; border-radius: 4px; } .btn { padding: 0.5rem 1rem; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } .btn:hover { background: #0056b3; } .success { color: #28a745; margin: 1rem 0; } .error { color: #dc3545; margin: 1rem 0; } </style> </head> <body> <h1>PHP 文件上传与预览</h1> <!-- 上传区域 --> <div class="upload-container"> <input type="file" id="file-input" accept="image/*,video/*"> <button class="btn" id="upload-btn">上传文件</button> <!-- 上传前预览区域 --> <div id="preview-area"> <p>选择文件后可预览</p> </div> </div> <!-- 上传结果展示 --> <?php if (!empty($uploadResult)): ?> <div class="<?php echo $uploadResult['status']; ?>"> <p><?php echo $uploadResult['msg']; ?></p> <?php if ($uploadResult['status'] === 'success'): ?> <div class="preview-item"> <?php if (str_starts_with($uploadResult['type'], 'image/')): ?> <img src="<?php echo $uploadResult['url']; ?>" alt="上传的图片"> <?php else: ?> <video controls src="<?php echo $uploadResult['url']; ?>"> 您的浏览器不支持视频播放 </video> <?php endif; ?> <p>访问链接：<a href="<?php echo $uploadResult['url']; ?>" target="_blank"><?php echo $uploadResult['url']; ?></a></p> </div> <?php endif; ?> <?php endif; ?> <script> // 获取DOM元素 const fileInput = document.getElementById('file-input'); const previewArea = document.getElementById('preview-area'); const uploadBtn = document.getElementById('upload-btn'); // 1. 选择文件后预览 fileInput.addEventListener('change', function(e) { const file = this.files[0]; if (!file) return; // 清空原有预览 previewArea.innerHTML = ''; // 创建预览元素 let previewElement; if (file.type.startsWith('image/')) { previewElement = document.createElement('img'); } else if (file.type.startsWith('video/')) { previewElement = document.createElement('video'); previewElement.controls = true; // 显示播放控件 } else { previewArea.innerHTML = '<p>不支持的文件类型</p>'; return; } // 设置预览URL（使用URL.createObjectURL避免立即上传） const previewUrl = URL.createObjectURL(file); previewElement.src = previewUrl; previewElement.style.maxWidth = '100%'; // 添加到预览区域 previewArea.appendChild(previewElement); // 释放URL对象（避免内存泄漏） previewElement.onload = function() { URL.revokeObjectURL(previewUrl); }; }); // 2. 上传文件（表单提交） uploadBtn.addEventListener('click', function() { if (!fileInput.files.length) { alert('请先选择文件！'); return; } // 创建FormData并提交 const formData = new FormData(); formData.append('file', fileInput.files[0]); // 提交表单（刷新页面展示结果） const form = document.createElement('form'); form.method = 'POST'; form.style.display = 'none'; // 将FormData内容转成表单元素 for (let [key, value] of formData.entries()) { const input = document.createElement('input'); input.type = 'file' if key === 'file' else 'hidden'; input.name = key; input.value = value; form.appendChild(input); } document.body.appendChild(form); form.submit(); }); </script> </body> </html> |
|
