PHP多文件上传表单：提取文件名（去.jpg后缀）存入隐藏变量

嘿，我来帮你搞定这个多文件上传的小难题！其实核心就是监听文件选择事件，遍历每个文件处理文件名，再把结果存到隐藏变量里——咱们一步步来：

第一步：搭建基础HTML结构 #

首先你需要一个支持多文件选择的上传表单，还有用来存储处理后文件名的隐藏字段（两种方案可选，看你后端需求）：

<form id="uploadForm">
  <!-- 允许选择多个JPG文件 -->
  <input type="file" id="fileInput" multiple accept=".jpg">
  
  <!-- 方案1：单个隐藏字段，用逗号分隔所有处理后的文件名 -->
  <input type="hidden" id="processedFilenames" name="processedFilenames">
  
  <!-- 方案2：用容器存放多个隐藏字段（适合后端需要数组参数的场景） -->
  <!-- <div id="hiddenFieldsContainer"></div> -->
  
  <button type="submit">提交上传</button>
</form>

第二步：编写JavaScript处理逻辑 #

关键是监听文件输入的change事件，拿到选中的文件列表后逐个处理：

document.getElementById('fileInput').addEventListener('change', function(e) {
  // 获取用户选中的所有文件
  const selectedFiles = e.target.files;
  const cleanedFilenames = [];

  // 遍历每个文件处理文件名
  for (const file of selectedFiles) {
    // 用正则去掉结尾的.jpg/.JPG后缀（i表示忽略大小写）
    // 即使文件名里有多个点（比如"photo.info.jpg"）也能正确处理
    const nameWithoutExtension = file.name.replace(/\.jpg$/i, '');
    
    // 可选：过滤非JPG文件（虽然HTML加了accept，但防手动改后缀的情况）
    if (nameWithoutExtension === file.name) {
      alert(`⚠️ ${file.name} 不是有效的JPG文件，请重新选择`);
      continue;
    }

    cleanedFilenames.push(nameWithoutExtension);
  }

  // 方案1：把处理后的文件名用逗号分隔存入单个隐藏字段
  document.getElementById('processedFilenames').value = cleanedFilenames.join(',');

  // 方案2：生成多个隐藏字段，每个对应一个文件名（后端可通过filenames[]接收数组）
  // const container = document.getElementById('hiddenFieldsContainer');
  // container.innerHTML = ''; // 清空之前的旧字段
  // cleanedFilenames.forEach(name => {
  //   const hiddenInput = document.createElement('input');
  //   hiddenInput.type = 'hidden';
  //   hiddenInput.name = 'filenames[]';
  //   hiddenInput.value = name;
  //   container.appendChild(hiddenInput);
  // });
});

为什么你的getFilename函数可能无效？ #

大概率是这两个常见问题：

• 没正确遍历文件列表：input.files返回的是FileList对象，它不是标准数组，直接用普通数组方法可能失效，得用for...of或者Array.from()转成数组后再遍历
• 后缀处理逻辑有漏洞：比如用split('.')[0]会在文件名包含多个点（比如travel.diary.jpg）时得到错误结果，或者没考虑大小写的.JPG文件

这样处理后，当用户选完文件，处理后的文件名就自动存入隐藏变量了，提交表单时后端就能拿到这些值啦！

内容的提问来源于stack exchange，提问作者Rocco The Taco