如何在PHP文件上传过程中显示加载界面？

我来帮你搞定上传时显示加载界面的需求～你的现有代码是完成数据库插入后跳转，但没有处理上传过程中的等待反馈——传统同步表单提交会让页面卡住，用户完全不知道进度，下面是具体的解决方案：

核心思路 #

要实现实时加载提示，必须用**异步上传（AJAX）**来处理表单提交：这样可以在上传开始时立刻显示加载界面，等服务器处理完（文件上传+数据库操作）再隐藏加载层并跳转。

步骤1：调整前端表单，添加加载元素 #

先把你的表单改成支持AJAX的结构，同时加一个默认隐藏的加载提示层：

<form id="uploadForm" enctype="multipart/form-data" method="post">
  <!-- 这里放你的文件输入框和其他表单字段 -->
  <input type="file" name="uploadFile" required>
  <button type="submit">提交上传</button>
</form>

<!-- 加载提示层，默认隐藏 -->
<div id="loadingOverlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); color:#fff; text-align:center; padding-top:25%; font-size:1.2rem;">
  <h2>正在上传，请稍候...</h2>
  <!-- 可以加个加载动画图标，比如用CSS实现的旋转圆圈 -->
</div>

步骤2：用JavaScript处理异步上传（附jQuery版代码） #

通过监听表单提交事件，阻止默认跳转，显示加载层后异步发送数据：

$(document).ready(function() {
  $('#uploadForm').submit(function(e) {
    e.preventDefault(); // 阻止传统表单提交
    
    // 显示加载界面
    $('#loadingOverlay').show();
    
    // 打包表单数据（包括文件）
    var formData = new FormData(this);
    
    // 发送AJAX请求到处理脚本
    $.ajax({
      url: 'upload_handler.php', // 你的PHP处理文件路径
      type: 'POST',
      data: formData,
      contentType: false, // 必须设置，否则文件无法上传
      processData: false, // 必须设置，防止jQuery自动处理数据
      success: function(response) {
        // 上传成功，隐藏加载层并跳转
        $('#loadingOverlay').hide();
        alert('上传完成！');
        window.location.href = 'load.php'; // 替换成你的跳转页面
      },
      error: function() {
        // 上传失败，提示用户
        $('#loadingOverlay').hide();
        alert('上传失败，请检查文件后重试！');
      }
    });
  });
});

步骤3：修改PHP处理逻辑（适配AJAX+防注入） #

把你原有的数据库插入逻辑放到upload_handler.php里，同时补上文件上传处理，重点要修复SQL注入漏洞：

<?php
$con = mysqli_connect("localhost","user","password","db_name");
// 检查数据库连接
if (mysqli_connect_errno()) {
  echo "db_connect_fail";
  exit;
}

// 处理文件上传（如果你的需求包含文件上传）
if(isset($_FILES['uploadFile']) && $_FILES['uploadFile']['error'] === UPLOAD_ERR_OK){
  $targetDir = "uploads/";
  // 确保上传目录存在，不存在则创建
  if(!is_dir($targetDir)) mkdir($targetDir, 0755, true);
  
  $targetFile = $targetDir . basename($_FILES["uploadFile"]["name"]);
  
  // 移动上传文件到目标目录
  if(move_uploaded_file($_FILES["uploadFile"]["tmp_name"], $targetFile)){
    // 文件上传成功，执行数据库插入（用预处理语句防注入！）
    $current_date = date("h:i:sa");
    $date_title = "TODAY";
    
    $update_query1 = "INSERT INTO date(date_title, date) VALUES(?, ?)";
    $stmt = mysqli_prepare($con, $update_query1);
    mysqli_stmt_bind_param($stmt, "ss", $date_title, $current_date);
    
    if(mysqli_stmt_execute($stmt)){
      echo "success";
    } else {
      echo "db_insert_fail";
    }
    mysqli_stmt_close($stmt);
  } else {
    echo "upload_fail";
  }
} else {
  echo "no_file";
}

mysqli_close($con);
?>

几个重要提示 #

• SQL注入防护：你的原代码直接把变量拼进SQL，非常危险！上面的PHP代码用了预处理语句，一定要坚持这种写法。
• 加载样式自定义：你可以给loadingOverlay加CSS动画（比如旋转的加载图标），让提示更直观。
• 原生JS替代方案：如果不想用jQuery，用原生XMLHttpRequest也能实现，逻辑完全一致，只是代码写法不同。

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