本教程旨在指导开发者如何利用jQuery和CSS，实现自定义文件上传按钮的交互效果。通过隐藏默认的文件输入框，并使用一个自定义标签作为视觉替代，当用户选择文件后，该标签将动态显示所选文件的名称，从而提升用户体验和界面美观度。
在网页开发中，原生的文件上传按钮样式通常不尽如人意，与整体页面设计风格格格不入。为了提供更好的用户体验和视觉一致性，开发者经常需要自定义文件上传按钮的外观。本教程将详细介绍如何利用HTML、CSS和jQuery实现一个美观且功能完善的自定义文件上传组件，当用户选择文件后，其关联的标签将动态显示所选文件的名称。
核心原理
实现自定义文件上传按钮的关键在于：
- 隐藏原生输入框：将 <input type="file"> 元素设置为不可见，但保持其功能性。
- 创建自定义标签：使用一个 <label> 元素作为视觉上的“按钮”，并通过 for 属性将其与隐藏的 input 关联起来。
- 动态更新文本：利用JavaScript（此处使用jQuery）监听 input 元素的 change 事件，获取选中的文件名，并将其更新到 label 内部的指定元素中。
HTML 结构
首先，我们需要构建基础的HTML结构。每个文件上传组件包含一个隐藏的 input[type="file"] 和一个与之关联的 label 元素。label 内部包含一个 span 元素，用于显示默认文本或选中的文件名。
<form method="POST" enctype="multipart/form-data"> <!-- 文件上传输入框：隐藏且具有唯一ID --> <input type="file" name="recto" id="recto" class="btnsend" /> <!-- 自定义标签：通过for属性与input关联，内部span用于显示文件名 --> <label for="recto" class="labelbtn"><span>Choisir le Recto</span></label> <input type="file" name="verso" id="verso" class="btnsend" /> <label for="verso" class="labelbtn"><span>Choisir le Verso</span></label> <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>
解释：
- input type="file" 元素通过 class="btnsend" 被标记为需要隐藏的元素，并且每个输入框都有一个唯一的 id。
- label 元素通过 for 属性与对应的 input 关联。点击 label 会触发关联 input 的文件选择对话框。
- label 内部的 span 元素是我们将动态更新其文本的目标。
CSS 样式
接下来，我们使用CSS来隐藏原生的文件输入框，并美化自定义的 label 元素，使其看起来像一个按钮。
.btnsend {
display: block; /* 确保占据空间，但实际不可见 */
visibility: hidden; /* 隐藏元素 */
position: absolute; /* 脱离文档流，不影响布局 */
/* 或者使用 opacity: 0; width: 0; height: 0; overflow: hidden; 等方式 */
}
.labelbtn {
color: #fff;
display: inline-block; /* 使其表现得像一个块级元素但可以与文本并排 */
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
touch-action: manipulation; /* 优化触摸设备交互 */
cursor 
