Form IO文件上传组件文件名悬停效果实现及Form Builder配置咨询

架构老林

2026-6-12

Form IO 文件上传组件：悬停显示完整文件名实现方案

能否直接在Form Builder中配置？

Form Builder本身没有内置配置选项实现鼠标悬停显示完整文件名的效果，需要通过自定义代码（CSS或JavaScript）完成，且所有操作都可以在Form Builder内完成。

实现方法

方法1：自定义CSS（简单快捷）

通过CSS实现文本截断与hover展开，无需额外脚本：

打开Form Builder，进入表单的「Settings」标签
找到「Custom CSS」输入框，粘贴以下代码：

/* 文件名元素默认截断显示 */
.formio-component-file .formio-file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

/* hover时展开显示完整文件名 */
.formio-component-file .formio-file-name:hover {
  overflow: visible;
  white-space: normal;
  background: #ffffff;
  padding: 4px 6px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  z-index: 1000;
  max-width: 300px;
}

保存表单后预览，文件名超出宽度时会显示省略号，鼠标悬停即可看到完整名称。

方法2：JavaScript + 原生title属性（依赖浏览器tooltip）

通过给文件名元素添加title属性，利用浏览器原生tooltip显示完整名称：

在Form Builder中选中目标文件上传组件
进入组件的「Custom Logic」标签
在「Ready」事件下粘贴以下代码：

// 处理单个文件场景
const fileNameEl = document.querySelector('.formio-component-file .formio-file-name');
if (fileNameEl) {
  const fullName = fileNameEl.textContent.trim();
  fileNameEl.setAttribute('title', fullName);
}

// 处理多文件上传场景
const fileItems = document.querySelectorAll('.formio-component-file .formio-file-item');
fileItems.forEach(item => {
  const nameEl = item.querySelector('.formio-file-name');
  if (nameEl) {
    nameEl.setAttribute('title', nameEl.textContent.trim());
  }
});