媒体上传展示系统，通过三个html页面实现主上传、次显示

kissfox · 发表于 2026-1-27 13:36

最近因为公司需要在多个电视机上访问网页用来展示图片或视频，可为了考虑方便后台上传图片和视频，特写了这个媒体上传展示系统
首页index.html

[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;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            background-color: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            text-align: center;
            max-width: 500px;
            width: 90%;
        }

        h1 {
            color: #333;
            margin-bottom: 30px;
            font-size: 2.5em;
        }

        .description {
            color: #666;
            margin-bottom: 40px;
            line-height: 1.6;
            font-size: 1.1em;
        }

        .buttons {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .btn {
            padding: 15px 30px;
            font-size: 1.2em;
            text-decoration: none;
            border-radius: 8px;
            transition: transform 0.3s, box-shadow 0.3s;
            display: block;
            color: white;
            border: none;
            cursor: pointer;
        }

        .btn-show {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .btn-upload {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .btn:active {
            transform: translateY(0);
        }

        .features {
            margin-top: 40px;
            text-align: left;
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
        }

        .features h3 {
            color: #333;
            margin-bottom: 15px;
        }

        .features ul {
            list-style-type: none;
        }

        .features li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
        }

        .features li:before {
            content: "&#10003;";
            color: #28a745;
            font-weight: bold;
            margin-right: 10px;
        }

        [url=home.php?mod=space&uid=945662]@media[/url] (max-width: 768px) {
            .container {
                padding: 30px 20px;
            }
            
            h1 {
                font-size: 2em;
            }
            
            .btn {
                padding: 12px 20px;
                font-size: 1em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>媒体上传展示系统</h1>
        <p class="description">
            一个简单易用的媒体文件上传和展示平台，支持图片、视频和PPT文件的上传与展示。
        </p>
        
        <div class="buttons">
            <a href="show.html" class="btn btn-show">查看展示页</a>
            <a href="upload.html" class="btn btn-upload">前往上传页</a>
        </div>
        
        <div class="features">
            <h3>功能特点</h3>
            <ul>
                <li>支持图片上传与展示 (JPG, JPEG, PNG, GIF)</li>
                <li>支持视频上传与播放 (MP4, WEBM, OGG)</li>
                <li>支持PPT文件上传</li>
                <li>拖拽上传功能</li>
                <li>实时预览</li>
                <li>文件信息显示</li>
                <li>本地存储，数据持久化</li>
                <li>文件大小限制（图片20MB，视频100MB，PPT 50MB）</li>
            </ul>
        </div>
    </div>
</body>
</html>

上传页upload.html

[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;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f5f5;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        header {
            text-align: center;
            margin-bottom: 30px;
        }

        h1 {
            color: #333;
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .upload-section {
            margin-bottom: 30px;
        }

        .upload-area {
            border: 2px dashed #ccc;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            margin-bottom: 20px;
            transition: border-color 0.3s;
            background-color: #fafafa;
        }

        .upload-area.drag-over {
            border-color: #007bff;
            background-color: #f0f8ff;
        }

        .upload-area p {
            color: #666;
            margin-bottom: 15px;
            font-size: 16px;
        }

        .file-input {
            display: none;
        }

        .upload-btn {
            padding: 12px 25px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .upload-btn:hover {
            background-color: #0056b3;
        }

        .preview-container {
            margin-top: 20px;
            text-align: center;
        }

        .preview-image, .preview-video {
            max-width: 100%;
            max-height: 300px;
            display: none;
        }

        .file-info {
            margin-top: 15px;
            padding: 10px;
            background-color: #e9ecef;
            border-radius: 5px;
            display: none;
        }

        .progress-container {
            margin-top: 20px;
            display: none;
        }

        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #e9ecef;
            border-radius: 10px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background-color: #007bff;
            width: 0%;
            transition: width 0.3s;
        }

        .status-message {
            margin-top: 15px;
            padding: 10px;
            border-radius: 5px;
            display: none;
        }

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

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

        .controls {
            margin-top: 30px;
            display: flex;
            gap: 15px;
            justify-content: center;
        }

        .btn {
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #218838;
        }

        .btn-secondary {
            background-color: #6c757d;
        }

        .btn-secondary:hover {
            background-color: #5a6268;
        }

        .supported-formats {
            margin-top: 10px;
            color: #666;
            font-size: 14px;
        }

        .file-size-limit {
            color: #666;
            font-size: 14px;
            margin-top: 5px;
        }

        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2em;
            }
            
            .upload-area {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>文件上传页</h1>
            <p>上传图片、视频或PPT文件</p>
        </header>

        <div class="upload-section">
            <h2>上传图片</h2>
            <div class="upload-area" id="imageUploadArea">
                <p>拖拽图片文件到这里或点击下方按钮上传</p>
                <p class="supported-formats">支持格式: JPG, JPEG, PNG, GIF</p>
                <p class="file-size-limit">文件大小限制: 20MB</p>
                <input type="file" id="imageInput" class="file-input" accept="image/*">
                <button class="upload-btn">选择图片文件</button>
            </div>
            <div class="preview-container">
                <img id="imagePreview" class="preview-image" alt="图片预览">
                <div id="imageFileInfo" class="file-info"></div>
            </div>
        </div>

        <div class="upload-section">
            <h2>上传视频</h2>
            <div class="upload-area" id="videoUploadArea">
                <p>拖拽视频文件到这里或点击下方按钮上传</p>
                <p class="supported-formats">支持格式: MP4, WEBM, OGG</p>
                <p class="file-size-limit">文件大小限制: 100MB</p>
                <input type="file" id="videoInput" class="file-input" accept="video/*">
                <button class="upload-btn">选择视频文件</button>
            </div>
            <div class="preview-container">
                <video id="videoPreview" class="preview-video" controls></video>
                <div id="videoFileInfo" class="file-info"></div>
            </div>
        </div>

        <div class="upload-section">
            <h2>上传PPT</h2>
            <div class="upload-area" id="pptUploadArea">
                <p>拖拽PPT文件到这里或点击下方按钮上传</p>
                <p class="supported-formats">支持格式: PPT, PPTX</p>
                <p class="file-size-limit">文件大小限制: 50MB</p>
                <input type="file" id="pptInput" class="file-input" accept=".ppt,.pptx,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation">
                <button class="upload-btn">选择PPT文件</button>
            </div>
            <div class="preview-container">
                <div id="pptPreview" style="display:none;">
                    <p>上传的PPT文件将在此显示预览</p>
                </div>
                <div id="pptFileInfo" class="file-info"></div>
            </div>
        </div>

        <div class="progress-container" id="progressContainer">
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
        </div>

        <div class="status-message" id="statusMessage"></div>

        <div class="controls">
            <button class="btn">前往展示页</button>
            <button class="btn btn-secondary">清除已上传文件</button>
        </div>
    </div>

    <script>
        // 文件大小限制配置
        const FILE_SIZE_LIMITS = {
            image: 20 * 1024 * 1024, // 20MB
            video: 100 * 1024 * 1024, // 100MB
            ppt: 50 * 1024 * 1024 // 50MB
        };

        // 图片上传功能
        document.getElementById('imageInput').addEventListener('change', function(e) {
            handleFileUpload(e.target.files[0], 'image');
        });

        // 视频上传功能
        document.getElementById('videoInput').addEventListener('change', function(e) {
            handleFileUpload(e.target.files[0], 'video');
        });

        // PPT上传功能
        document.getElementById('pptInput').addEventListener('change', function(e) {
            handleFileUpload(e.target.files[0], 'ppt');
        });

        // 拖拽上传功能
        setupDragAndDrop('imageUploadArea', 'image');
        setupDragAndDrop('videoUploadArea', 'video');
        setupDragAndDrop('pptUploadArea', 'ppt');

        function setupDragAndDrop(elementId, fileType) {
            const uploadArea = document.getElementById(elementId);
            
            uploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.classList.add('drag-over');
            });
            
            uploadArea.addEventListener('dragleave', function(e) {
                e.preventDefault();
                this.classList.remove('drag-over');
            });
            
            uploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                this.classList.remove('drag-over');
                
                if (e.dataTransfer.files.length) {
                    handleFileUpload(e.dataTransfer.files[0], fileType);
                }
            });
        }

        function handleFileUpload(file, fileType) {
            if (!file) return;
            
            // 检查文件类型
            if (!validateFileType(file, fileType)) {
                showMessage(`不支持的文件类型: ${file.type}`, 'error');
                return;
            }
            
            // 检查文件大小
            const maxSize = FILE_SIZE_LIMITS[fileType];
            if (file.size > maxSize) {
                const maxSizeMB = maxSize / (1024 * 1024);
                showMessage(`文件大小超过限制 (${maxSizeMB}MB)`, 'error');
                return;
            }
            
            // 显示进度条
            showProgress(true);
            
            // 读取文件
            const reader = new FileReader();
            
            reader.onprogress = function(e) {
                if (e.lengthComputable) {
                    const percentLoaded = Math.round((e.loaded / e.total) * 100);
                    updateProgress(percentLoaded);
                }
            };
            
            reader.onload = function(e) {
                // 保存到localStorage
                localStorage.setItem('uploadedFile', e.target.result);
                localStorage.setItem('fileName', file.name);
                localStorage.setItem('fileType', fileType);
                
                // 显示预览
                showPreview(file, e.target.result, fileType);
                
                // 隐藏进度条
                showProgress(false);
                
                // 显示成功消息
                showMessage(`文件 "${file.name}" 上传成功！`, 'success');
                
                // 触发存储事件，通知展示页更新
                window.dispatchEvent(new Event('storage'));
            };
            
            reader.onerror = function() {
                showProgress(false);
                showMessage('文件读取失败', 'error');
            };
            
            // 根据文件类型读取
            if (fileType === 'image') {
                reader.readAsDataURL(file);
            } else if (fileType === 'video') {
                reader.readAsDataURL(file);
            } else if (fileType === 'ppt') {
                reader.readAsDataURL(file);
            }
        }

        function validateFileType(file, expectedType) {
            const fileName = file.name.toLowerCase();
            const fileType = file.type.toLowerCase();
            
            switch(expectedType) {
                case 'image':
                    return fileName.endsWith('.jpg') || 
                           fileName.endsWith('.jpeg') || 
                           fileName.endsWith('.png') || 
                           fileName.endsWith('.gif') ||
                           fileType.startsWith('image/');
                case 'video':
                    return fileName.endsWith('.mp4') || 
                           fileName.endsWith('.webm') || 
                           fileName.endsWith('.ogg') ||
                           fileType.startsWith('video/');
                case 'ppt':
                    return fileName.endsWith('.ppt') || 
                           fileName.endsWith('.pptx') ||
                           file.type === 'application/vnd.ms-powerpoint' ||
                           file.type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
                default:
                    return false;
            }
        }

        function showPreview(file, fileData, fileType) {
            const fileName = file.name;
            const fileSize = formatFileSize(file.size);
            
            // 隐藏所有预览
            document.getElementById('imagePreview').style.display = 'none';
            document.getElementById('videoPreview').style.display = 'none';
            document.getElementById('pptPreview').style.display = 'none';
            
            // 隐藏所有文件信息
            document.getElementById('imageFileInfo').style.display = 'none';
            document.getElementById('videoFileInfo').style.display = 'none';
            document.getElementById('pptFileInfo').style.display = 'none';
            
            // 显示相应的预览和文件信息
            switch(fileType) {
                case 'image':
                    document.getElementById('imagePreview').src = fileData;
                    document.getElementById('imagePreview').style.display = 'block';
                    document.getElementById('imageFileInfo').innerHTML = 
                        `文件名: ${fileName}<br>大小: ${fileSize}<br>类型: 图片`;
                    document.getElementById('imageFileInfo').style.display = 'block';
                    break;
                    
                case 'video':
                    // 根据文件扩展名确定MIME类型
                    let mimeType = 'video/mp4'; // 默认类型
                    if (fileName.toLowerCase().endsWith('.webm')) {
                        mimeType = 'video/webm';
                    } else if (fileName.toLowerCase().endsWith('.ogg')) {
                        mimeType = 'video/ogg';
                    }
                    
                    document.getElementById('videoPreview').src = fileData;
                    document.getElementById('videoPreview').type = mimeType;
                    document.getElementById('videoPreview').style.display = 'block';
                    document.getElementById('videoFileInfo').innerHTML = 
                        `文件名: ${fileName}<br>大小: ${fileSize}<br>类型: 视频`;
                    document.getElementById('videoFileInfo').style.display = 'block';
                    break;
                    
                case 'ppt':
                    document.getElementById('pptPreview').innerHTML = 
                        `<p>已上传PPT文件: ${fileName}</p><p>大小: ${fileSize}</p><p>类型: PPT</p>`;
                    document.getElementById('pptPreview').style.display = 'block';
                    document.getElementById('pptFileInfo').innerHTML = 
                        `文件名: ${fileName}<br>大小: ${fileSize}<br>类型: PPT`;
                    document.getElementById('pptFileInfo').style.display = 'block';
                    break;
            }
        }

        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        function showProgress(show) {
            document.getElementById('progressContainer').style.display = show ? 'block' : 'none';
            if (!show) {
                updateProgress(0);
            }
        }

        function updateProgress(percent) {
            document.getElementById('progressFill').style.width = percent + '%';
        }

        function showMessage(message, type) {
            const statusEl = document.getElementById('statusMessage');
            statusEl.textContent = message;
            statusEl.className = 'status-message status-' + type;
            statusEl.style.display = 'block';
            
            // 3秒后自动隐藏消息
            setTimeout(() => {
                statusEl.style.display = 'none';
            }, 3000);
        }

        function clearStorage() {
            localStorage.removeItem('uploadedFile');
            localStorage.removeItem('fileName');
            localStorage.removeItem('fileType');
            
            // 隐藏所有预览
            document.getElementById('imagePreview').style.display = 'none';
            document.getElementById('videoPreview').style.display = 'none';
            document.getElementById('pptPreview').style.display = 'none';
            
            // 隐藏所有文件信息
            document.getElementById('imageFileInfo').style.display = 'none';
            document.getElementById('videoFileInfo').style.display = 'none';
            document.getElementById('pptFileInfo').style.display = 'none';
            
            // 触发存储事件，通知展示页更新
            window.dispatchEvent(new Event('storage'));
            
            showMessage('已清除所有上传的文件', 'success');
        }
    </script>
</body>
</html>

显示页show.html

[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;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #000000;
            padding: 20px;
        }

        .container {
            max-width: 97%;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
        }

        h1 {
            color: #333;
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .display-frame {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .content-container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .media-content {
            max-width: 100%;
            max-height: 100%;
            display: none;
        }

        .media-content.active {
            display: block;
        }

        .media-content img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .media-content video {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .media-content iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .placeholder-text {
            color: #ff0000;
            font-size: 4em;
            text-align: center;
        }

        .controls {
            margin-top: 20px;
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        .btn {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #0056b3;
        }

        .file-info {
            margin-top: 15px;
            text-align: center;
            color: #666;
            font-size: 14px;
        }

        .ppt-viewer {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .ppt-options {
            margin-top: 20px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .ppt-option-btn {
            padding: 10px 15px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .ppt-option-btn:hover {
            background-color: #218838;
        }

        @media (max-width: 768px) {
            .display-frame {
                height: 60vh;
            }
            
            h1 {
                font-size: 2em;
            }
            
            .ppt-options {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="display-frame">
            <div class="content-container">
                <div class="placeholder-text" id="placeholderText">
                    暂无内容，请前往上传页上传文件
                </div>
                <div class="media-content" id="imageContent"></div>
                <div class="media-content" id="videoContent"></div>
                <div class="media-content" id="pptContent"></div>
            </div>
        </div>

      


    </div>

    <script>
        // 从localStorage获取上传的文件
        function loadContent() {
            const uploadedFile = localStorage.getItem('uploadedFile');
            const fileName = localStorage.getItem('fileName');
            const fileType = localStorage.getItem('fileType');
            
            if (!uploadedFile) {
                document.getElementById('placeholderText').style.display = 'block';
                document.getElementById('fileInfo').innerHTML = '';
                return;
            }
            
            document.getElementById('placeholderText').style.display = 'none';
            
            // 隐藏所有媒体内容元素
            document.querySelectorAll('.media-content').forEach(el => {
                el.classList.remove('active');
                el.innerHTML = '';
            });
            
            // 根据文件类型显示相应内容
            switch(fileType) {
                case 'image':
                    showImage(uploadedFile, fileName);
                    break;
                case 'video':
                    showVideo(uploadedFile, fileName);
                    break;
                case 'ppt':
                    showPPT(uploadedFile, fileName);
                    break;
                default:
                    console.log('不支持的文件类型:', fileType);
            }
            
            // 更新文件信息
            document.getElementById('fileInfo').innerHTML = 
                `<strong>当前文件:</strong> ${fileName} <strong>类型:</strong> ${fileType}`;
        }
        
        function showImage(imageData, fileName) {
            const imageContent = document.getElementById('imageContent');
            imageContent.innerHTML = `<img src="${imageData}" alt="${fileName}">`;
            imageContent.classList.add('active');
        }
        
        function showVideo(videoData, fileName) {
            const videoContent = document.getElementById('videoContent');
            // 根据文件扩展名确定MIME类型
            let mimeType = 'video/mp4'; // 默认类型
            if (fileName.toLowerCase().endsWith('.webm')) {
                mimeType = 'video/webm';
            } else if (fileName.toLowerCase().endsWith('.ogg')) {
                mimeType = 'video/ogg';
            }
            
            videoContent.innerHTML = `
                <video controls autoplay muted>
                    <source src="${videoData}" type="${mimeType}">
                    您的浏览器不支持视频播放。
                </video>
            `;
            videoContent.classList.add('active');
            
            // 尝试播放视频（在某些浏览器中，可能需要用户交互才能播放带声音的视频）
            const videoElement = videoContent.querySelector('video');
            videoElement.play().catch(function(error) {
                console.log('自动播放失败，等待用户交互:', error);
                // 如果自动播放失败，移除静音属性让用户手动播放
                videoElement.muted = false;
            });
        }
        
        function showPPT(pptData, fileName) {
            const pptContent = document.getElementById('pptContent');
            pptContent.innerHTML = `
                <div class="ppt-viewer">
                    <h3>${fileName}</h3>
                    <p>检测到您上传的是PPT文件</p>
                    <p>由于浏览器安全限制，无法直接在页面中显示PPT文件</p>
                    <p>请选择以下方式之一来查看文件：</p>
                    <div class="ppt-options">
                        <button class="ppt-option-btn">下载文件</button>
                        <button class="ppt-option-btn">在线预览</button>
                        <button class="ppt-option-btn">转换为PDF预览</button>
                    </div>
                </div>
            `;
            pptContent.classList.add('active');
        }
        
        function downloadFile(dataUrl, fileName) {
            const a = document.createElement('a');
            a.href = dataUrl;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }
        
        function viewInOnlineViewer(dataUrl, fileName) {
            // 将文件上传到临时服务以在线查看（模拟）
            // 实际应用中，这里需要一个后端服务来处理文件上传
            alert('在实际应用中，这里会将文件上传到在线服务进行预览。当前演示中，我们将下载文件以供查看。');
            downloadFile(dataUrl, fileName);
        }
        
        function convertToPDF(dataUrl, fileName) {
            // 尝试使用Google Docs Viewer进行预览
            const fileExtension = fileName.split('.').pop().toLowerCase();
            if (fileExtension === 'ppt' || fileExtension === 'pptx') {
                // 创建一个隐藏的iframe来显示Google文档查看器
                const viewerUrl = `[url]https://docs.google.com/gviewer?url=[/url]${encodeURIComponent(dataUrl)}&embedded=true`;
                const pptContent = document.getElementById('pptContent');
                pptContent.innerHTML = `
                    <iframe src="${viewerUrl}" width="100%" height="100%" style="min-height: 500px;"></iframe>
                `;
            } else {
                alert('不支持的文件类型');
            }
        }
        
        function refreshContent() {
            loadContent();
        }
        
        // 页面加载时加载内容
        window.onload = function() {
            loadContent();
        };
        
        // 监听存储变化
        window.addEventListener('storage', function(e) {
            if (e.key === 'uploadedFile' || e.key === 'fileType' || e.key === 'fileName') {
                loadContent();
            }
        });
    </script>
</body>
</html>

airball23 · 发表于 2026-1-27 17:41

文件大小限制太小了，局域网没必要吧

xxcs373 · 发表于 2026-1-27 17:43

咋没有上传服务器使用了

sktao · 发表于 2026-1-27 18:57

不用限制

michener · 发表于 2026-1-27 21:01

本帖最后由 michener 于 2026-1-27 21:05 编辑

说上传限制小的源码都给了自己改呀

谢谢分享
有点像是AI写的界面上传功能有问题点击没反应

kissfox · 发表于 2026-1-28 08:53

airball23 发表于 2026-1-27 17:41
文件大小限制太小了，局域网没必要吧

可以自行修改代码

kissfox · 发表于 2026-1-28 08:54

michener 发表于 2026-1-27 21:01
说上传限制小的源码都给了自己改呀

上传功能没有问题啊

michener · 发表于 2026-1-28 09:51

kissfox 发表于 2026-1-28 08:54
上传功能没有问题啊

你用你贴出来的upload.html代码试试我这边测试点击上传按钮没任何反应

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 媒体上传展示系统，通过三个html页面实现主上传、次显示

浏览过的版块