<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
width: 400px;
height: 30px;
padding-left:20px;
}
a.input {
width:70px;
height:30px;
line-height:30px;
background:
text-align:center;
display:inline-block;/*具有行内元素的视觉，块级元素的属性 宽高*/
overflow:hidden;/*去掉的话，输入框也可以点击*/
position:relative;/*相对定位，为
top:10px;
}
a.input:hover {
background:
color:
}
a{
text-decoration:none;
color:
}
opacity:0;/*设置此控件透明度为零，即完全透明*/
filter:alpha(opacity=0);/*设置此控件透明度为零，即完全透明针对IE*/
font-size:100px;
position:absolute;/*绝对定位，相对于 .input */
top:0;
right:0;
}
</style>
</head>
<body>
<div class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type="text" id="file_name" readonly="readonly" placeholder="请选择文件" value="" />
<a href="javascript:void(0);" class="input">
浏览
<input type="file" id="file" name="document[file]">
</a>
</form>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#file").change(function(){ // 当 id 为 file 的对象发生变化时
var fileSize = this.files[0].size;
var size = fileSize / 1024 / 1024;
if (size > 5) {
alert("附件不能大于5M,请将文件压缩后重新上传！");
this.value="";
return false;
}else{
$("#file_name").val($("#file").val()); //将
}
})
});
</script>
</body>
</html>
