如何实现文件上传并在书籍网页的列表中展示上传内容？

你的核心问题是主页面的书籍列表是静态硬编码的，所以新上传的文件没法自动出现在列表里。我们需要把静态列表改成动态生成的，让页面每次加载时自动读取服务器上的合法书籍文件，同时保留你原来的字母分组、搜索功能等特性。

下面是具体的修改步骤：

1. 将主页面改为PHP文件（index.php） #

因为要动态生成内容，把原来的index.html重命名为index.php，这样可以嵌入PHP代码读取服务器上的文件。

2. 替换静态列表为动态生成代码 #

把原来的<ul id="myUL">里的所有静态<li>替换成以下PHP代码，它会自动读取当前目录下的合法书籍文件，按首字母分组展示：

<ul id="myUL">
<?php
// 允许的文件扩展名（包含你原来列表里的html格式）
$allowed_extensions = ['epub', 'pdf', 'html'];
// 获取当前目录下的所有文件
$files = scandir('./');
// 过滤掉.和..，以及不符合扩展名的文件
$book_files = array_filter($files, function($file) use ($allowed_extensions) {
    $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
    return !in_array($file, ['.', '..']) && in_array($ext, $allowed_extensions);
});
// 按文件名排序（不区分大小写）
natcasesort($book_files);

$current_initial = '';
foreach ($book_files as $file) {
    // 获取文件名的首字母（大写）
    $initial = strtoupper(substr(pathinfo($file, PATHINFO_FILENAME), 0, 1));
    // 如果首字母变化，添加分组标题
    if ($initial !== $current_initial) {
        $current_initial = $initial;
        echo "<li><a href=\"\">$current_initial</a></li><br>";
    }
    // 获取书籍显示名称（去掉扩展名，替换下划线/连字符为空格）
    $book_name = ucwords(str_replace(['-', '_'], ' ', pathinfo($file, PATHINFO_FILENAME)));
    // 生成下载链接，html文件直接跳转，epub/pdf添加download属性
    $download_attr = in_array(strtolower(pathinfo($file, PATHINFO_EXTENSION)), ['epub', 'pdf']) ? 'download' : '';
    echo "<li><a href=\"$file\" $download_attr>$book_name</a></li><br>";
}
?>
</ul>

3. 优化upload.php的上传逻辑 #

修改你的upload.php，确保上传成功后跳回主页面，同时完善路径和错误处理（避免文件名重复）：

<?php
if (isset($_FILES['file'])) {
    $file = $_FILES['file'];
    $file_name = $file['name'];
    $file_tmp = $file['tmp_name'];
    $file_size = $file['size'];
    $file_error = $file['error'];
    $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
    
    $allowed = array("epub", "pdf", "html"); // 新增html格式，和主页面一致
    $max_size = 2097152; // 2MB
    
    if (in_array($file_ext, $allowed)) {
        if ($file_error === 0) {
            if ($file_size <= $max_size) {
                // 确保路径正确，当前目录保存
                $file_destination = './' . $file_name;
                // 避免文件名重复，添加数字后缀
                $counter = 1;
                while (file_exists($file_destination)) {
                    $name_parts = pathinfo($file_name);
                    $file_destination = "./{$name_parts['filename']}_{$counter}.{$name_parts['extension']}";
                    $counter++;
                }
                if (move_uploaded_file($file_tmp, $file_destination)) {
                    // 上传成功后跳回主页面
                    header('Location: index.php');
                    exit;
                } else {
                    echo "<p>An error occurred while moving your file!</p>";
                    echo "<a href='index.php'>Back to Book Store</a>";
                }
            } else {
                echo "<p>Your file is too big! Maximum allowed size is 2MB.</p>";
                echo "<a href='index.php'>Back to Book Store</a>";
            }
        } else {
            echo "<p>Error uploading file! Error code: $file_error</p>";
            echo "<a href='index.php'>Back to Book Store</a>";
        }
    } else {
        echo "<p>You can't upload files of this type! Allowed types: " . implode(', ', $allowed) . "</p>";
        echo "<a href='index.php'>Back to Book Store</a>";
    }
} else {
    echo "<p>No file was selected for upload!</p>";
    echo "<a href='index.php'>Back to Book Store</a>";
}
?>

4. 确保上传页面（archive.html）的表单正确 #

你的上传页面需要有一个正确的表单，设置enctype="multipart/form-data"才能上传文件，示例代码：

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" accept=".epub,.pdf,.html">
    <button type="submit">Upload Book</button>
</form>

针对000webhosting的注意事项 #

• 确保服务器目录有写入权限：000webhosting默认允许上传到当前目录，若遇到权限问题，可通过文件管理器将目录权限设置为755。
• 上传大小限制：免费主机默认限制可能和你代码里的2MB一致，若需要更大限制，可能需要升级主机或联系客服（免费版通常无法自定义）。
• 静态资源路径：style1.css、logo2.ico等资源的路径无需修改，因为页面改成index.php后路径和原html保持一致。

这样修改后，每次上传书籍成功后会自动跳回主页面，主页面会动态读取所有合法书籍文件，按首字母分组展示，和你原来的静态列表格式完全一致，且原有搜索功能可以正常工作（JS基于DOM元素，动态生成的列表结构和原静态列表一致）。

内容的提问来源于stack exchange，提问作者coder