基于现有前端代码实现多文件自定义上传及多文件名展示

核心修正点 #

• 替换原无效的<image>触发入口为原生<label>标签：原代码使用的image标签既不符合HTML语法规范（无独立的image标签，正确图片标签为<img>），也不具备绑定表单控件的原生能力——只有label元素可以通过for属性和隐藏的file input建立关联，实现点击唤起文件选择面板的效果，无需额外编写点击触发的JS逻辑
• 适配多文件展示逻辑：原脚本仅读取选中文件列表的第一个文件，多文件选择时会遗漏其余文件的信息，重构后会遍历全部选中的文件，根据单/多文件场景匹配对应的提示文案
• 保留原有的可访问性逻辑：保留原有的焦点样式、required必填校验属性，确保键盘操作、表单校验的原有功能不受影响

完整可运行代码 #

HTML结构 #

<form>
  <input type="file" id="file-upload" multiple required />
  <!-- 替换原image标签为label，实现原生触发关联 -->
  <label for="file-upload" class="upload-trigger">Upload file</label>
  <div id="file-upload-filename"></div>
</form>

样式代码 #

input[type="file"] {
  z-index: -1;
  position: absolute;
  opacity: 0;
}
/* 给自定义触发按钮补充基础可交互样式 */
.upload-trigger {
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
}
/* 保留原有焦点高亮逻辑，适配键盘操作场景 */
input:focus + label {
  outline: 2px solid #2563eb;
}

交互脚本 #

var input = document.getElementById('file-upload');
var infoArea = document.getElementById('file-upload-filename');

input.addEventListener('change', showFileName);

function showFileName(event) {
  var input = event.srcElement;
  var selectedFiles = input.files;
  // 未选中文件时清空提示区域
  if (selectedFiles.length === 0) {
    infoArea.textContent = '';
    return;
  }
  // 遍历所有选中文件获取名称列表
  var fileNames = Array.from(selectedFiles).map(function(file) {
    return file.name;
  }).join('、');
  // 单文件/多文件场景分别生成提示内容
  infoArea.textContent = selectedFiles.length === 1
    ? 'File name: ' + fileNames
    : 'Selected ' + selectedFiles.length + ' files: ' + fileNames;
}

交互效果说明 #

• 点击自定义的“Upload file”按钮时，会正常唤起系统文件选择面板，支持按住Ctrl/Shift组合键多选文件
• 选中文件后，下方提示区域会自动匹配场景展示对应内容：单文件直接展示文件名，多文件展示选中总数和全部文件名列表
• 键盘Tab聚焦到隐藏的file input时，关联的label会展示高亮轮廓，符合可访问性设计要求

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