如何将upload.php的$msg_ok/$msg_nok显示到index.html中

你可以选同步表单跳转或者AJAX无刷新提交两种方案，根据实际需求选择即可。

方案1：传统同步表单提交（适合不需要无刷新交互的场景） #

注意：纯静态index.html默认无法解析PHP代码，建议直接把文件改名为index.php，不需要额外修改服务器配置。

• 第一步：改造upload.php，把提示信息存入Session，上传处理完成后跳回首页，不要直接在upload.php输出页面内容

<?php
// session_start必须放在代码最开头，前面不能有任何输出
session_start();

$targetPath = "uploads/" . basename($_FILES["inpFile"]["name"]);
$msg_ok = "ok 文件上传成功";
$msg_nok = "nok 出错了，上传失败";

if (move_uploaded_file($_FILES['inpFile']['tmp_name'], $targetPath)) {
    // 把成功消息存入session
    $_SESSION['upload_msg'] = [
        'type' => 'success',
        'content' => $msg_ok
    ];
} else {
    // 存入失败消息
    $_SESSION['upload_msg'] = [
        'type' => 'error',
        'content' => $msg_nok
    ];
}
// 跳转回首页
header("Location: index.php");
exit;

• 第二步：在index.php里添加消息显示区域，放在你想要展示提示的位置即可

<?php
session_start();
// 读取消息后立刻删除，避免刷新页面重复显示提示
$msg = isset($_SESSION['upload_msg']) ? $_SESSION['upload_msg'] : null;
unset($_SESSION['upload_msg']);
?>
<!-- 页面其他原有内容，以下是上传表单示例 -->
<!-- 注意：带文件上传的表单必须加enctype属性，否则后端接收不到文件 -->
<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="inpFile" required>
    <button type="submit">上传文件</button>
</form>

<!-- 消息显示区块 -->
<?php if ($msg): ?>
<div class="msg <?= $msg['type'] === 'success' ? 'msg-success' : 'msg-error' ?>">
    <?= $msg['content'] ?>
</div>
<?php endif; ?>

你可以自行给.msg-success、.msg-error类加CSS样式，比如成功提示用绿色字体，失败提示用红色字体。

方案2：AJAX无刷新提交（交互体验更好，页面无需跳转） #

这个方案不需要修改index.html的后缀，上传全程页面不刷新，消息直接在当前页渲染。

• 第一步：改造upload.php，直接返回JSON格式的结构化结果，不要混杂其他HTML输出

<?php
$targetPath = "uploads/" . basename($_FILES["inpFile"]["name"]);
$msg_ok = "ok 文件上传成功";
$msg_nok = "nok 出错了，上传失败";

// 声明返回内容为JSON格式
header('Content-Type: application/json');
$response = [];
if (move_uploaded_file($_FILES['inpFile']['tmp_name'], $targetPath)) {
    $response = [
        'code' => 0,
        'msg' => $msg_ok,
        'debug' => $_FILES // 调试用，正式上线可删除
    ];
} else {
    $response = [
        'code' => 1,
        'msg' => $msg_nok,
        'debug' => $_FILES
    ];
}
echo json_encode($response);
exit;

• 第二步：给index.html添加表单和前端交互逻辑

<!-- 上传表单 -->
<form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="inpFile" required>
    <button type="submit">上传文件</button>
</form>
<!-- 消息显示容器 -->
<div id="msgBox"></div>

<script>
const form = document.getElementById('uploadForm');
const msgBox = document.getElementById('msgBox');

form.addEventListener('submit', async function(e) {
    // 阻止默认表单跳转行为
    e.preventDefault();
    const formData = new FormData(form);
    // 向后端发送上传请求
    const res = await fetch('upload.php', {
        method: 'POST',
        body: formData
    }).then(res => res.json());
    // 将返回的消息渲染到页面
    msgBox.textContent = res.msg;
    msgBox.style.color = res.code === 0 ? 'green' : 'red';
    // 调试信息可直接在控制台查看
    console.log(res.debug);
})
</script>

注意事项 #

• 提前创建好uploads目录，给目录分配PHP运行用户的写入权限，否则会一直返回上传失败
• 所有带文件上传的表单必须加enctype="multipart/form-data"属性，否则后端无法接收到文件数据
• 正式上线建议删掉调试输出的$_FILES内容，避免泄露服务器敏感信息

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