如何在JavaScript中将HTML表单中多选的图像文件名转换为逗号分隔字符串？

看起来你的核心需求是把用户选中的多张图片文件名拼接成逗号分隔的字符串，存到隐藏字段里，但当前代码有几个小问题导致无法正常工作。咱们一步步来修复：

问题分析 #

1. 文件名拼接缺少分隔符：你当前的循环只是把文件名直接连在一起，没有加入逗号，最终会得到类似file1.jpgfile2.png的结果，而非预期的file1.jpg,file2.png。
2. 文件名获取方式不可靠：用input.files[i].value.replace(/.*[\/\\]/, '')提取文件名，不同浏览器的value路径格式可能有差异，直接用File对象的name属性更稳妥——它本身就是纯文件名。
3. 未声明循环变量：循环里的i没有用let或var声明，会变成全局变量，可能引发意外问题。
4. FileReader冗余处理：如果只是要获取文件名，完全不需要用FileReader（它是用来读取文件内容的），这部分可以简化；如果确实需要处理Base64内容，也要注意多文件的异步处理逻辑。

修正后的代码 #

JavaScript部分 #

const input = document.mainForm.imageInput;
input.onchange = function() {
  let filesSize = 0;
  // 计算所有文件总大小
  for (let i = 0; i < input.files.length; i++) {
    filesSize += input.files[i].size;
  }

  if ((filesSize / 1024 / 1024) > 100) {
    console.log("总大小超过100MB");
    // 这里可以添加用户提示，比如弹出警告框
  } else {
    console.log("总大小符合要求");
    // 拼接逗号分隔的文件名
    let allImagesInOneString = "";
    for (let i = 0; i < input.files.length; i++) {
      // 非第一个文件前添加逗号
      if (i > 0) {
        allImagesInOneString += ",";
      }
      allImagesInOneString += input.files[i].name;
    }
    // 存入隐藏字段
    document.mainForm.imageName.value = allImagesInOneString;

    // （可选）如果需要处理所有图片的Base64内容，递归处理多文件异步问题
    let allBase64Strings = "";
    const processNextFile = (index) => {
      if (index >= input.files.length) {
        // 所有文件处理完成后存入隐藏字段
        document.mainForm.hiddenImageNameBase64.value = allBase64Strings;
        return;
      }
      const file = input.files[index];
      const reader = new FileReader();
      reader.onloadend = function() {
        const b64 = reader.result.replace(/^data:.+;base64,/, '');
        if (index > 0) {
          allBase64Strings += ",";
        }
        allBase64Strings += b64;
        processNextFile(index + 1);
      };
      reader.readAsDataURL(file);
    };
    processNextFile(0);

    input.classList.remove("is-ok");
    input.classList.add("is-notok");
  }
};

HTML部分（修正隐藏字段name属性与JS的一致性） #

<div class="container">
  <form class="x" name="mainForm" id="mainForm" method="post" action="https://testpagex.com">
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="imageInput" class="font-weight-bold">Add images ( maximum size 100mb )</label>
        <input type="file" class="form-control-file" id="imageInput" name="imageInput" multiple />
      </div>
    </div>
    <input type="hidden" name="imageName"> <!-- 统一name属性与JS中的变量对应 -->
    <input type="hidden" name="hiddenImageNameBase64">
    <div class="y">
      <button type="submit" class="btn btn-primary px-5 font-weight-bold">Save</button>
    </div>
  </form>
</div>

关键说明 #

• 文件名拼接逻辑：通过判断循环索引，在非第一个文件前添加逗号，确保输出格式正确。
• 可靠获取文件名：input.files[i].name是File API的标准属性，不受浏览器路径格式影响，比解析value更稳定。
• 多文件Base64处理：用递归方式逐个处理文件，避免异步操作导致的顺序混乱，最终同样用逗号分隔存储所有Base64字符串。
• 变量作用域：所有循环变量i用let声明，避免全局变量污染。

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