自定义文件上传按钮：实时显示文件名教程

<form method="POST" enctype="multipart/form-data">
  <!-- 文件上传输入框 1 -->
  <input type="file" name="recto" id="recto" class="btnsend" />
  <label for="recto" class="labelbtn"><span>Choisir le Recto</span></label>

  <!-- 文件上传输入框 2 -->
  <input type="file" name="verso" id="verso" class="btnsend" />
  <label for="verso" class="labelbtn"><span>Choisir le Verso</span></label>

  <!-- 文件上传输入框 3 -->
  <input type="file" name="selfie" id="selfie" class="btnsend" />
  <label for="selfie" class="labelbtn"><span>Choisir le Selfie</span></label> <br>

  <!-- 提交按钮 -->
  <input type="submit" name="submit" class="sendall" /> 
</form>

<!-- 引入 jQuery 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

/* 隐藏原生的文件输入框 */
.btnsend {
  display: block; /* 确保占据空间，但被隐藏 */
  visibility: hidden; /* 隐藏元素但保留其在DOM中的位置 */
  position: absolute; /* 绝对定位，使其不影响页面布局 */
}

/* 自定义文件选择按钮的样式 */
.labelbtn {
  color: #fff; /* 文字颜色 */
  display: inline-block; /* 行内块元素，便于布局 */
  margin-bottom: 0; /* 底部外边距 */
  font-weight: normal; /* 字体粗细 */
  text-align: center; /* 文本居中 */
  vertical-align: middle; /* 垂直对齐 */
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
  background-color: #0057a0; /* 背景颜色 */
  border: 1px solid transparent; /* 边框 */
  white-space: nowrap; /* 防止文本换行 */
  padding: 6px 12px; /* 内边距 */
  font-size: 14px; /* 字体大小 */
  line-height: 1.42857143; /* 行高 */
  border-radius: 4px; /* 圆角边框 */
  -webkit-user-select: none; /* 禁止用户选择文本 */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

/* 鼠标悬停时的样式 */
.labelbtn:hover {
  opacity: 0.8; /* 降低不透明度 */
  background-color: #0072a0; /* 改变背景颜色 */
}

/* 提交按钮的样式（可选） */
.sendall {
  margin-top: 30px;
}

$(document).ready(function() {
  $('input[type="file"]').on('change', function() {
    // 获取完整的文件路径
    var fullPath = $(this).val();
    var filename;

    // 检查文件路径是否为空，如果为空，则恢复默认文本
    if (fullPath === "") {
      // 获取对应的label元素，然后找到其中的span，恢复其原始文本
      var defaultText = $(this).next('label').data('default-text');
      $(this).next('label').find('span').html(defaultText || '选择文件'); // 提供一个备用默认值
    } else {
      // 从完整路径中提取文件名
      // 使用split('\').pop()来处理Windows路径（反斜杠）
      // 也可以考虑使用lastIndexOf('/')或lastIndexOf('\')来更健壮地处理不同操作系统路径
      filename = fullPath.split('\').pop().split('/').pop(); 

      // 更新对应label内部的span文本为文件名
      // $(this) 指代当前的 input[type="file"] 元素
      // .next('label') 找到紧邻的下一个 label 元素
      // .find('span') 在该 label 内部查找 span 元素
      // .html(filename) 更新 span 的内容为文件名
      $(this).next('label').find('span').html(filename);
    }
  });

  // 初始化时保存默认文本，以便在文件取消选择时恢复
  $('input[type="file"]').each(function() {
    var defaultText = $(this).next('label').find('span').html();
    $(this).next('label').data('default-text', defaultText);
  });
});