JS实现自定义样式文件上传：隐藏input与透明覆盖方案

JS实现自定义样式文件上传：隐藏input与透明覆盖方案

在Web开发中，文件上传功能至关重要。虽然<input type="file" />是标准的上传控件，但其默认样式往往不够美观，且“浏览”按钮的文字无法直接修改。通常的做法是将该控件隐藏，通过点击其他自定义元素（如图片或按钮）来触发文件选择功能。

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<style type="text/css">
._box
{ 
width: 119px;
height: 37px;
background-color: #53AD3F;
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: scroll;
line-height: 37px;
text-align: center;
color: white;
cursor: pointer;
} 
.none
{ 
width: 0px;
height: 0px;
display: none;
} 
</style>
<title>js 实现 input file 文件上传 /></title>
</head>
<body>
<form id="form1" runat="server" method="post" enctype="multipart/form-data">
<div>
<div class="_box">选择图片</div>
</div>
<div class="none">
<input type="file" name="_f" id="_f" />
</div>
</form>
</body>
</html>
<script type="text/javascript">
jQuery(function () {
$("._box").click(function () {
$("#_f").click();
}); 
}); 
</script>

然而，在Firefox及部分高版本浏览器中，后台可以正常获取到上传的文件；但在一些低版本浏览器中，后台可能无法获取到Request.Files。

查阅相关资料后，有建议修改为以下代码：

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<style type="text/css">
._box
{ 
width: 119px;
height: 37px;
background-color: #53AD3F;
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: scroll;
line-height: 37px;
text-align: center;
color: white;
cursor: pointer;
} 
.none
{ 
width: 0px;
height: 0px;
display: none;
} 
</style>
<title>js 实现 input file 文件上传 /></title>
</head>
<body>
<form id="form1" runat="server" method="post" enctype="multipart/form-data">
<div>
<div class="_box">选择图片</div>
</div>
<div class="none">
<input type="file" name="_f" id="_f" />
</div>
</form>
</body>
</html>
<script type="text/javascript">
jQuery(function () {
$("._box").click(function () {
return $("#_f").click();
}); 
}); 
</script>

虽然添加了return关键字提高了部分兼容性，但仍有部分浏览器表现不佳。

我们发现，只要手动点击<input type="file" />控件，后台就一定能获取到上传的文件。

因此，我们可以尝试将<input type="file" />设置为透明。

修改后的代码如下：

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
._box
{ 
position: relative;
width: 119px;
height: 37px;
background-color: #53AD3F;
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: scroll;
line-height: 37px;
text-align: center;
color: white;
cursor: pointer;
overflow: hidden;
z-index: 1;
} 
._box input
{ 
position: absolute;
width: 119px;
height: 40px;
line-height: 40px;
font-size: 23px;
opacity: 0;
filter: "alpha(opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
left: -5px;
top: -2px;
cursor: pointer;
z-index: 2;
} 
</style>
<title>js 实现 input file 文件上传 /></title>
</head>
<body>
<form id="form1" runat="server" method="post" enctype="multipart/form-data">
<div>
<div class="_box">
<input type="file" name="_f" id="_f" />
选择图片
</div>
</div>
</form>
</body>
</html>

通过这种方式，用户点击“选择图片”时，实际触发的是不透明度为0的<input type="file" />控件。虽然用户看不到该控件，但后台仍能正常获取到上传的文件。

ok

总结来说，可以使用一个不透明度为0的<input type="file" />覆盖在用户可见的标签（如图片或文字）上，让用户点击。

通过设置width、height、line-height和font-size可以控制<input type="file" />右侧浏览按钮的大小。

通过设置left和top（或right、bottom）可以控制<input type="file" />右侧浏览按钮的位置，这些值可以设置为负数。

通过z-index可以设置它们的层叠覆盖关系。

注意，form标签必须包含enctype="multipart/form-data"属性才能正确上传文件。