版权声明：转载请注明来源，http://blog.csdn.net/u010071211 https://blog.csdn.net/u010071211/article/details/83345262
效果演示：
<!-- /**
* @Author: Ding Jianlong
* @Date: 2018-09-21 13:25:05
* @Last Modified by: Ding Jianlong
* @Last Modified time: 2018-10-24 15:47:13
*/ -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>美化文件上传按钮</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<div class="container">
<h3>美化文件上传按钮</h3>
<label for="upVideo">
<div id="upVideoBtn" class="btn" type="button">选择视频</div>
</label>
<input id="upVideo" style="display:none" type="file" accept="video/mp4,audio/mp4" name="upVideo">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script>
$('#upVideo').on('change',function(){
//alert($('#upVideo').val()); //绝对路径
//分割成数组，提取文件名
var arr = $('#upVideo').val().split('\\');
var fileName = arr[arr.length-1];
$('#upVideoBtn').text(fileName);
$('#upVideoBtn').attr('class','btn btn-success');
if(!fileName){
$('#upVideoBtn').text('选择视频');
$('#upVideoBtn').attr('class','btn');
}
});
</script>
</body>
</html>