基于Bootstrap美化html的input框（上传文件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap File Input Example</title>
<!-- 引入 Bootstrap 的 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<div class="row">
<div class="col-12">
<!-- 创建一个文件上传的表单 -->
<form action="/upload" method="post" enctype="multipart/form-data">
<!-- 创建一个文件上传的 input 框 -->
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" name="file">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
<!-- 提交按钮 -->
<button type="submit" class="btn btn-primary mt-3">Upload</button>
</form>
</div>
</div>
</div>
<!-- 引入 jQuery 和 Bootstrap 的 JS 文件 -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
// 使用 jQuery 初始化 custom file input
$(document).ready(function () {
$('.custom-file-input').on('change', function () {
var fileName = $(this).val().split('\\').pop();
$(this).next('.custom-file-label').addClass("selected").html(fileName);
});
});
</script>
</body>
</html>这段代码使用了Bootstrap的CSS和JavaScript库来美化HTML中的文件上传input框。它使用了Bootstrap的自定义文件输入组件，当用户选择文件时，该组件会更新显示的文件名。这是一个简单而又现代的文件上传表单，对于需要在Web应用程序中提供文件上传功能的开发者来说，这是一个很好的例子。
评论已关闭