Django项目中用JavaScript修改文件输入框显示已存简历文件名

原生文件输入框的「No file chosen」是浏览器默认文本，无法直接修改，我们可以通过视觉替换+JS逻辑实现已有文件名的显示，同时支持选择新文件时自动更新。以下是具体修改步骤：

1. 调整HTML结构与样式 #

修改表单区域，新增容器整合文件名显示和文件输入框，用CSS隐藏默认输入框的文字，模拟输入框样式展示文件名：

<div class="form-group">
  <label>Resume</label>
  <span style="color:#ff0000">*</span>
  <br>
  <!-- 新增容器整合显示区域与输入框 -->
  <div class="file-input-container">
    <span id="resid" class="file-name-display"></span>
    <input type="file" name="resume" id="resume_Id" class="form-control file-input" required>
  </div>
</div>

添加以下CSS（可放在页面<style>标签或项目CSS文件中）：

.file-input-container {
  position: relative;
  display: inline-block;
}

/* 隐藏默认输入框的文字，只保留点击区域 */
.file-input {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* 自定义文件名显示样式，模仿表单输入框 */
.file-name-display {
  padding: 6px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background-color: #fff;
  min-width: 200px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2. 修改JavaScript函数，处理文件名提取与更新 #

从Django传递的resume可能是完整文件路径，先提取纯文件名，再添加文件选择监听，确保新文件选择后自动更新显示：

function editCorporateTrainersdetails(name, email, phone, rate, skills, description, resume, trainer_Id) {
  // 填充其他表单字段
  document.getElementById('name_Id').value = name;
  document.getElementById('email_Id').value = email;
  document.getElementById('phone_Id').value = phone;
  document.getElementById('rate_Id').value = rate;
  document.getElementById('skillId').value = skills;
  document.getElementById('description_Id').value = description;
  document.getElementById('trainer_Id').value = trainer_Id;

  // 从路径中提取纯文件名（兼容相对/绝对路径）
  const fileName = resume.split('/').pop();
  const displayElement = document.getElementById('resid');
  displayElement.textContent = fileName || 'No file chosen';

  // 绑定文件选择事件，更新显示文件名
  const fileInput = document.getElementById('resume_Id');
  // 先移除旧监听避免重复绑定
  fileInput.removeEventListener('change', updateFileName);
  fileInput.addEventListener('change', updateFileName);

  function updateFileName() {
    if (this.files.length > 0) {
      displayElement.textContent = this.files[0].name;
    } else {
      displayElement.textContent = 'No file chosen';
    }
  }
}

3. 优化Django模板路径处理 #

如果{{ i.Resume }}返回的是完整URL或带前缀的路径，上述split('/').pop()方法能自动提取最后一段文件名；若你的FileField存储的是纯文件名，直接使用即可。

这样修改后，点击编辑按钮时，已有简历文件名会显示在模拟输入框的区域，用户选择新文件时也会自动更新显示，完全替代默认的「No file chosen」提示。

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