如何将JS变量中的文件信息传递到HTML并提交至PHP存储？

你的核心问题有两个：一是span标签不属于表单可提交控件，PHP无法通过$_POST获取它的内容；二是页面里存在多个独立表单，提交按钮和文件信息不在同一个表单内，导致数据无法一起提交。另外代码还存在SQL注入风险，必须修复。

步骤1：重构表单结构 #

把所有需要提交的字段（包括文件选择、其他参数、隐藏的文件名/大小、提交按钮）放到同一个表单中，确保enctype和action正确设置：

<div class="tabela">
  <div class="wrapper">
    <form action="" enctype="multipart/form-data" method="post" id="main_form">
      <!-- 文件选择框 -->
      <input type="file" class="file-input" name="fileToUpload" id="fileToUpload" accept=".zip" hidden>
      <span class="material-symbols-rounded">upload</span>
      <p>Add gerber file</p>

      <!-- 文件信息显示区域 -->
      <div class="file-info" style="display: none;">
        <p>Nome do ficheiro: <span class="file-name"></span> (<span class="file-size"></span> KB)</p>
        <!-- 添加隐藏输入框，用于提交文件名和大小 -->
        <input type="hidden" name="nome_produto" id="hidden_nome_produto">
        <input type="hidden" name="tamanho" id="hidden_tamanho">
      </div>

      <!-- 其他表单字段（根据实际需求补充完整） -->
      <input type="text" name="material" placeholder="Material" required>
      <input type="text" name="layers" placeholder="Layers" required>
      <input type="text" name="camadas" placeholder="Camadas">
      <input type="number" name="quantidade" placeholder="Quantidade" required>
      <input type="text" name="dimensao_x" placeholder="Dimensão X" required>
      <input type="text" name="dimensao_y" placeholder="Dimensão Y" required>
      <input type="text" name="cor" placeholder="Cor" required>
      <input type="text" name="superficie" placeholder="Superfície" required>
      <input type="text" name="slikscreen" placeholder="Slikscreen">

      <!-- 提交按钮 -->
      <p><input required type="submit" name="submit_enviar_dados" value="Registar"></p>
    </form>
  </div>
</div>

步骤2：修改JS逻辑，将文件名和大小赋值给隐藏输入框 #

原来的JS只修改了span的文本，现在要同时把值写到隐藏输入框里，这样表单提交时PHP就能获取到：

const form = document.querySelector("#main_form");
const fileInput = form.querySelector(".file-input");
const fileInfo = document.querySelector(".file-info");
const fileNameElement = document.querySelector(".file-name");
const fileSizeElement = document.querySelector(".file-size");
const hiddenFileName = document.getElementById("hidden_nome_produto");
const hiddenFileSize = document.getElementById("hidden_tamanho");

// 监听文件选择事件
fileInput.addEventListener("change", function() {
  const file = this.files[0];
  if (!file) return;

  const fileName = file.name;
  const fileSize = Math.round(file.size / 1024); // 转换为KB

  // 更新页面显示的文件名和大小
  fileNameElement.textContent = fileName;
  fileSizeElement.textContent = fileSize;
  // 把值存入隐藏输入框，用于表单提交
  hiddenFileName.value = fileName;
  hiddenFileSize.value = fileSize;
  // 显示文件信息区域
  fileInfo.style.display = "block";
});

步骤3：修复PHP代码的SQL注入问题 #

原代码直接拼接POST参数到SQL语句，非常容易被注入攻击，改用预处理语句执行插入：

<?php
// 假设$ligax是已连接成功的数据库对象
if(isset($_POST['submit_enviar_dados'])){    
    // 获取所有表单字段值
    $material = $_POST['material'];
    $layers = $_POST['layers'];
    $camadas = $_POST['camadas'] ?? '';
    $quantidade = $_POST['quantidade'];
    $dimensao_x = $_POST['dimensao_x'];
    $dimensao_y = $_POST['dimensao_y'];
    $cor = $_POST['cor'];
    $superficie = $_POST['superficie'];
    $slikscreen = $_POST['slikscreen'] ?? '';
    $nome_produto = $_POST['nome_produto'];
    $tamanho = $_POST['tamanho'];

    // 使用预处理语句防止SQL注入
    $inserir = "INSERT INTO produto_pcb 
                (material, layers, camadas, quantidade, dimensao_x, dimensao_y, cor, superficie, slikscreen, nome_produto, tamanho) 
                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
    
    $stmt = mysqli_prepare($ligax, $inserir);
    // 绑定参数，"sssssssssss"表示11个字符串类型参数
    mysqli_stmt_bind_param($stmt, "sssssssssss", $material, $layers, $camadas, $quantidade, $dimensao_x, $dimensao_y, $cor, $superficie, $slikscreen, $nome_produto, $tamanho);
    $result = mysqli_stmt_execute($stmt);

    if($result){
        echo '<script>alert("Dados inseridos com sucesso.");</script>';
    } else {
        echo '<script>alert("Dados não inseridos!");</script>';
    }
    mysqli_stmt_close($stmt);
}
?>

关键注意点 #

• 所有需要提交的字段必须在同一个表单内，提交按钮必须属于该表单。
• 只有带name属性的表单控件（input、select等）的内容会被提交，span仅用于显示，必须用隐藏输入框中转数据。
• 永远不要直接把用户输入拼接到SQL语句中，预处理语句是防止SQL注入的标准做法。
• 如果需要实际上传文件到服务器，还需补充move_uploaded_file相关的文件处理逻辑，当前代码仅提交文件名和大小。

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