如何在Safari中通过JavaScript设置File Input后显示文件名？

在Chrome、Firefox中，通过JavaScript给type="file"的输入框设置文件后，输入框会自动显示文件名；但Safari仅支持手动选择文件时展示文件名，编程方式设置后UI不会更新。要解决这个问题，我们可以通过自定义UI模拟原生输入框的显示逻辑来实现，具体步骤如下：

实现思路 #

由于Safari原生不支持编程更新File Input的显示状态，我们可以：

• 隐藏原生的File Input元素
• 创建自定义的显示区域，用来展示选中/设置的文件名
• 同步原生输入框的文件状态到自定义区域，同时保留原生输入框的表单提交功能

完整示例代码 #

HTML结构 #

<!-- 隐藏的原生文件输入框 -->
<input id="fileInput" type="file" style="display: none;" />
<!-- 自定义的模拟输入框 -->
<div class="custom-file-input">
  <button id="triggerBtn">选择文件</button>
  <span id="fileNameDisplay">未选择文件</span>
</div>

CSS样式（模拟原生输入框风格） #

.custom-file-input {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  cursor: pointer;
}

.custom-file-input button {
  border: none;
  padding: 4px 8px;
  background-color: #0071e3;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

#fileNameDisplay {
  font-size: 14px;
  color: #333;
}

JavaScript逻辑 #

const fileInput = document.querySelector('#fileInput');
const fileNameDisplay = document.querySelector('#fileNameDisplay');
const triggerBtn = document.querySelector('#triggerBtn');

// 编程方式设置文件并更新显示
function setFileProgrammatically() {
  const blob = new Blob(["Demo"], { type: "text/plain" });
  const file = new File([blob], "demo.txt", {
    type: "text/plain",
  });
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add(file);
  fileInput.files = dataTransfer.files;
  
  // 同步更新自定义显示区域
  updateFileNameDisplay(fileInput.files);
}

// 点击自定义按钮触发原生文件选择
triggerBtn.addEventListener('click', () => {
  fileInput.click();
});

// 手动选择文件后同步更新显示
fileInput.addEventListener('change', () => {
  updateFileNameDisplay(fileInput.files);
});

// 通用更新文件名显示的函数
function updateFileNameDisplay(files) {
  if (files.length > 0) {
    fileNameDisplay.textContent = files[0].name;
  } else {
    fileNameDisplay.textContent = "未选择文件";
  }
}

// 调用编程设置文件的函数（示例）
setFileProgrammatically();

效果说明 #

• 无论是编程方式设置文件，还是手动选择文件，自定义区域都会准确显示文件名
• 原生File Input的文件数据保持完整，不影响表单提交或后续的文件操作

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