本教程详细介绍了如何利用jQuery和CSS，将默认的文件上传按钮美化，并实现文件选中后，其关联的自定义标签能动态显示所选文件的名称，从而显著提升用户体验。通过监听文件输入框的change事件，结合精确的DOM遍历，可以轻松高效地实现这一功能。
在网页开发中，原生的文件上传（<input type="file">）元素样式通常难以与整体设计风格协调。为了提供更好的用户体验和视觉一致性，开发者常常需要隐藏默认的文件输入框，并使用自定义的标签（<label>）作为上传按钮。然而，当用户选择文件后，如何让这个自定义的标签显示所选文件的名称，而不是固定的提示文本，是一个常见的需求。本教程将详细讲解如何使用jQuery和CSS来实现这一交互效果。
首先，我们需要构建基础的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>
结构说明：
接下来，我们需要编写CSS来隐藏默认的文件输入框，并美化自定义的<label>，使其看起来像一个按钮。
/* 隐藏实际的文件输入框 */
.btnsend {
display: block; /* 确保占据空间，但通过visibility和position隐藏 */
visibility: hidden; /* 隐藏元素，但保留其在DOM中的位置，以便label可以触发它 */
position: absolute; /* 绝对定位，使其不影响页面布局 */
width: 0; /* 宽度设为0，进一步确保不可见 */
height: 0; /* 高度设为0 */
overflow: hidden; /* 隐藏溢出内容 */
z-index: -1; /* 确保它在所有内容之下，不会意外被点击 */
}
/* 自定义按钮样式 */
.labelbtn {
color: #fff;
display: inline-block; /* 使其表现得像一个块级元素，但允许其他元素在同一行 */
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
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; /* 圆角边框 */
user-select: none; /* 禁止用户选择文本 */
transition: background-color 0.2s ease-in-out; /* 添加过渡效果 */
}
/* 鼠标悬停时的样式 */
.labelbtn:hover {
opacity: 0.8;
background-color: #0072a0; /* 悬停时改变背景色 */
}
/* 提交按钮的样式 (可选) */
.sendall {
margin-top: 30px;
/* 其他提交按钮样式 */
}样式说明：
Boo Admin响应式HTML5后台管理模板基于HTML5+Bootstrap2.2.2+jQuery设计制作，自适应屏幕分辨率大小，兼容PC端和手机移动端，全套模板，包含PSD源文件和模板开发技术文档，有用户登录页、用户注册页、仪表盘、表单、组件、通知、范围滑块、文件上传、缩略图、画廊、表格、统计、小工具、UI元素、按钮、ICOS图标、标签、模态框、进度条、日历等后台模板页面。
518
核心功能是当文件输入框的值发生变化时（即用户选择了文件），获取文件名并更新相应<label>内的<span>文本。
// 确保页面加载完成后执行
$(document).ready(function() {
// 监听所有类型为"file"的input元素的"change"事件
$('input[type="file"]').on('change', function() {
// 获取完整的路径，例如 "C: akepathexample.png"
var fullPath = $(this).val();
var filename = '';
// 检查是否选择了文件
if (fullPath) {
// 从完整路径中提取文件名
// split('\') 用于分割Windows路径，pop() 获取数组最后一个元素（文件名）
filename = fullPath.split('\').pop();
} else {
// 如果用户取消选择文件，获取原始的默认文本
// 这里的逻辑可以根据实际需求调整，例如从data属性获取
var inputId = $(this).attr('id');
if (inputId === 'recto') filename = 'Choisir le Recto';
else if (inputId === 'verso') filename = 'Choisir le Verso';
else if (inputId === 'selfie') filename = 'Choisir le Selfie';
}
// 找到当前input元素紧邻的下一个label元素，再在其内部查找span元素，并更新其HTML内容
$(this).next('label').find('span').html(filename);
});
});jQuery 代码说明：
为了使上述代码能够运行，请确保在HTML文件中引入jQuery库。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义文件上传按钮</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f7f6; }
form { background-color: #ffffff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); max-width: 600px; margin: 0 auto; }
.btnsend {
display: block;
visibility: hidden;
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: -1;
}
.labelbtn {
color: #fff;
display: inline-block;
margin-bottom: 15px; /* 增加底部外边距 */
font-weight: normal;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-color: #0057a0;
border: 1px solid transparent;
white-space: nowrap;
padding: 8px 15px; /* 调整填充 */
font-size: 15px; /* 调整字体大小 */
line-height: 1.42857143;
border-radius: 4px;
user-select: none;
transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.labelbtn:hover {
opacity: 0.9; /* 稍微降低透明度 */
background-color: #0072a0;
}
.sendall {
margin-top: 30px;
background-color: #28a745;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.sendall:hover {
background-color: #218838;
}
</style>
</head>
<body>
<form method="POST" enctype="multipart/form-data">
<input type="file" name="recto" id="recto" class="btnsend" />
<label for="recto" class="labelbtn"><span>Choisir le Recto</span></label>
<br> <!-- 添加换行符使按钮垂直排列 -->
<input type="file" name="verso" id="verso" class="btnsend" />
<label for="verso" class="labelbtn"><span>Choisir le Verso</span></label>
<br>
<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" value="提交文件" />
</form>
<script>
$(document).ready(function() {
$('input[type="file"]').on('change', function() {
var fullPath = $(this).val();
var filename = '';
if (fullPath) {
filename = fullPath.split('\').pop();
} else {
// 恢复默认文本的更通用方法：存储在data属性中
var originalText = $(this).next('label').data('default-text');
filename = originalText || '选择文件'; // 如果没有data属性，提供一个通用默认值
}
$(this).next('label').find('span').html(filename);
});
// 在页面加载时，为每个label存储其初始默认文本
$('input[type="file"]').each(function() {
var defaultText = $(this).next('label').find('span').html();
$(this).next('label').data('default-text', defaultText);
});
});
</script>
</body>
</html>优化说明：
通过上述步骤，您已经成功地将默认的文件上传按钮美化，并实现了选择文件后动态显示文件名的功能。这种方法不仅提升了页面的视觉美观度，也极大地改善了用户在文件上传过程中的交互体验。
以上就是使用jQuery动态更新文件上传标签显示文件名的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
594
收藏
