文件上传格式限制

文件上传格式限制测试

- 效果图
- 代码
效果图

代码

上传效果的 代码片.
javascript 复制代码
<!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>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
        }
        .test-section {
            margin: 30px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .test-result {
            margin-top: 10px;
            padding: 10px;
            border-radius: 3px;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .info {
            background-color: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
    </style>
</head>
<body>
    <h1>文件上传格式限制测试</h1>
    
    <div class="test-section">
        <h2>测试1: 图片格式限制 (MIME类型)</h2>
        <p>只允许选择: image/jpeg, image/jpg, image/png, image/bmp, image/x-pcx, image/gif, image/tiff</p>
        <input type="file" id="imageUpload" accept="image/jpeg,image/jpg,image/png,image/bmp,image/x-pcx,image/gif,image/tiff" multiple>
        <div id="imageResult" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-section">
        <h2>测试2: 扩展名限制</h2>
        <p>只允许选择: .jpg, .png, .jpeg, .bmp, .pcx, .gif, .tiff, .PNG, .JPG, .JPEG, .GIF</p>
        <input type="file" id="extensionUpload" accept=".jpg,.png,.jpeg,.bmp,.pcx,.gif,.tiff,.PNG,.JPG,.JPEG,.GIF" multiple>
        <div id="extensionResult" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-section">
        <h2>测试3: 无限制 (对比)</h2>
        <p>可以选择任何文件</p>
        <input type="file" id="noLimitUpload" multiple>
        <div id="noLimitResult" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-section">
        <h2>测试说明</h2>
        <div class="test-result info">
            <h3>预期行为:</h3>
            <ul>
                <li><strong>测试1 (MIME类型):</strong> 文件选择对话框应该只显示图片文件，不能选择"所有文件*"选项</li>
                <li><strong>测试2 (扩展名):</strong> 文件选择对话框应该只显示指定扩展名的文件，但仍然可以选择"所有文件*"选项</li>
                <li><strong>测试3 (无限制):</strong> 可以选择任何文件类型</li>
            </ul>
            <h3>注意事项:</h3>
            <ul>
                <li>不同浏览器对accept属性的支持可能有所不同</li>
                <li>MIME类型限制通常比扩展名限制更严格</li>
                <li>某些浏览器可能仍然允许用户手动选择"所有文件*"选项</li>
            </ul>
        </div>
    </div>

    <script>
        function setupFileInput(inputId, resultId, testName) {
            const input = document.getElementById(inputId);
            const result = document.getElementById(resultId);
            
            input.addEventListener('change', function(e) {
                const files = Array.from(e.target.files);
                result.style.display = 'block';
                
                if (files.length === 0) {
                    result.className = 'test-result error';
                    result.innerHTML = `<strong>${testName}:</strong> 没有选择任何文件`;
                    return;
                }
                
                let html = `<strong>${testName}:</strong> 选择了 ${files.length} 个文件<br>`;
                let allValid = true;
                
                files.forEach((file, index) => {
                    const fileName = file.name;
                    const fileSize = (file.size / 1024).toFixed(2);
                    const fileType = file.type || '未知';
                    
                    html += `${index + 1}. ${fileName} (${fileSize} KB, 类型: ${fileType})<br>`;
                    
                    // 简单的文件类型验证
                    if (inputId === 'imageUpload' && !fileType.startsWith('image/')) {
                        allValid = false;
                    }
                });
                
                if (allValid) {
                    result.className = 'test-result success';
                    html += '<strong>✓ 所有文件类型都符合要求</strong>';
                } else {
                    result.className = 'test-result error';
                    html += '<strong>✗ 发现不符合要求的文件类型</strong>';
                }
                
                result.innerHTML = html;
            });
        }

        // 设置所有测试
        setupFileInput('imageUpload', 'imageResult', 'MIME类型测试');
        setupFileInput('extensionUpload', 'extensionResult', '扩展名测试');
        setupFileInput('noLimitUpload', 'noLimitResult', '无限制测试');

        // 页面加载完成后的提示
        window.addEventListener('load', function() {
            console.log('文件上传格式限制测试页面已加载');
            console.log('请使用文件选择对话框测试不同浏览器的限制行为');
        });
    </script>
</body>
</html>