PHP/JS/HTML代码点击按钮无法显示文件列表HTML表格问题

看起来你在实现「上传文件后用JSON列出文件并生成HTML表格」的功能时遇到了表格不显示的问题，我来帮你排查并修复这个问题！从你提供的代码片段来看，主要问题集中在PHP输出的JSON格式不规范、JS缺少响应处理和表格生成逻辑这两个核心点上，下面是完整的解决方案：

步骤1：修复PHP脚本，输出标准JSON格式 #

你的PHP代码片段不完整，而且之前的echo提示会混入非JSON内容，导致JS解析失败。我们需要让PHP专门返回纯净的JSON数据，同时整合上传逻辑和文件列表获取逻辑：

<?php
// 确保files目录存在，没有则自动创建
$uploadDir = 'files/';
if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0755, true);
}

// 处理文件上传请求
$response = ['status' => 'success', 'message' => '', 'files' => []];
if (isset($_FILES['archivo1'])) {
    $fileName = $_FILES['archivo1']['name'];
    $tmpPath = $_FILES['archivo1']['tmp_name'];
    $targetPath = $uploadDir . $fileName;

    if ($_FILES["archivo1"]["error"] > 0) {
        $response['status'] = 'error';
        $response['message'] = '上传错误：' . $_FILES["archivo1"]["error"];
    } else {
        if (file_exists($targetPath)) {
            $response['status'] = 'warning';
            $response['message'] = $fileName . ' 已存在。';
        } else {
            if (move_uploaded_file($tmpPath, $targetPath)) {
                $response['message'] = '文件上传成功！';
            } else {
                $response['status'] = 'error';
                $response['message'] = '文件移动失败，请检查目录权限。';
            }
        }
    }
}

// 获取files目录下的所有文件
$dir = opendir($uploadDir);
while (($file = readdir($dir)) !== false) {
    if ($file != '.' && $file != '..') {
        $fullPath = $uploadDir . $file;
        $response['files'][] = [
            'name' => $file,
            'size' => filesize($fullPath),
            'modified' => date('Y-m-d H:i:s', filemtime($fullPath))
        ];
    }
}
closedir($dir);

// 设置响应头为JSON格式，避免乱码
header('Content-Type: application/json; charset=utf-8');
// 输出JSON数据，确保没有多余输出
echo json_encode($response);
exit;

步骤2：完善HTML结构（表单+按钮+表格容器） #

需要一个上传表单、触发列表加载的按钮，以及用来放置表格的容器：

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Gestión de Archivos</title>
    <style>
        table { border-collapse: collapse; width: 80%; margin: 20px auto; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .container { max-width: 1000px; margin: 0 auto; padding: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Gestión de Archivos</h1>
        <!-- 文件上传表单 -->
        <form id="uploadForm" enctype="multipart/form-data">
            <input type="file" name="archivo1" required>
            <button type="submit">Subir Archivo</button>
        </form>
        <!-- 加载文件列表按钮 -->
        <button id="loadFilesBtn" style="margin: 10px 0;">Cargar Lista de Archivos</button>
        <!-- 表格容器 -->
        <div id="fileTableContainer"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

步骤3：编写JS逻辑（处理上传+生成表格） #

用现代的fetch API发起请求，解析JSON后动态生成HTML表格：

// 处理文件上传
document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);

    fetch('list_files.php', {
        method: 'POST',
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        alert(data.message);
        // 上传成功后自动刷新文件列表
        if (data.status === 'success') {
            loadFileList();
        }
    })
    .catch(err => {
        console.error('上传请求失败:', err);
        alert('上传出错，请检查控制台信息');
    });
});

// 绑定加载列表按钮事件
document.getElementById('loadFilesBtn').addEventListener('click', loadFileList);

// 加载文件列表并生成表格
function loadFileList() {
    fetch('list_files.php')
    .then(res => res.json())
    .then(data => {
        const container = document.getElementById('fileTableContainer');
        // 没有文件时显示提示
        if (data.files.length === 0) {
            container.innerHTML = '<p>No hay archivos en el directorio.</p>';
            return;
        }
        // 构建HTML表格
        let tableHtml = `
            <table>
                <thead>
                    <tr>
                        <th>Nombre del Archivo</th>
                        <th>Tamaño (Bytes)</th>
                        <th>Última Modificación</th>
                    </tr>
                </thead>
                <tbody>
        `;
        // 遍历文件列表生成行
        data.files.forEach(file => {
            tableHtml += `
                <tr>
                    <td>${file.name}</td>
                    <td>${file.size}</td>
                    <td>${file.modified}</td>
                </tr>
            `;
        });
        tableHtml += '</tbody></table>';
        // 插入到页面
        container.innerHTML = tableHtml;
    })
    .catch(err => {
        console.error('加载列表失败:', err);
        alert('无法加载文件列表，请检查PHP脚本是否正常运行');
    });
}

关键注意事项 #

1. 权限问题：确保files/目录有读写权限（PHP的mkdir已经设置了0755权限，一般足够）
2. JSON纯净性：PHP脚本不能输出任何非JSON内容（比如echo的提示语句），否则JS会解析失败
3. 错误处理：代码中加入了错误捕获，你可以通过浏览器控制台查看具体错误信息
4. 自动刷新：上传文件后会自动刷新列表，提升用户体验

这样修改后，点击「Cargar Lista de Archivos」按钮就能正确显示文件表格，上传文件后也会自动更新列表啦！

内容的提问来源于stack exchange，提问作者Francisco O. Blasco