js 实现 input type="file" 文件上传示例代码

ttx9n · 发表于 2013-8-7 15:51:28

在开发中，文件上传必不可少但是它长得又丑、浏览的字样不能换，一般会让其隐藏点其他的标签（图片等）来时实现选择文件上传功能在开发中，文件上传必不可少，<input type="file" /> 是常用的上传标签，但是它长得又丑、浏览的字样不能换，我们一般会用让，<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>

但是在火狐和一些高版本的浏览器中后台可以获取到要上传的文件，一些低版本的浏览器压根就获取不到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" />，单用户切看不到 <input type="file" />后台亦可以获取到要上传的文件了。
ok
总结：
用一个不透明度为0的 <input type="file" />盖在要用户可见的标签（或图片等）上，让用户点击。
用 width height line-height font-size 来控制<input type="file" />右侧浏览按钮的大小。
用 left top （right 、 bottum）来控制<input type="file" />右侧浏览按钮的位置，可以设置为负值。
用z-index来设置它们的层覆盖关系。
form 必须有enctype="multipart/form-data"标记才能上传文件

z835648964 · 发表于 2022-8-9 05:21:51

儿飞飞微风DVD谁vdsvd

uj9lpc · 发表于 2022-8-16 13:29:40

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

4k0mp7m · 发表于 2022-10-13 04:25:35

看到这帖子真是高兴！

0y3yp · 发表于 2022-11-13 03:09:22

论坛有你更精彩！

z80vh · 发表于 2022-12-24 12:10:35

先把创新班才能下班才能下班

gyalp · 发表于 2023-6-4 05:50:43

dfdsafdsfdsfdsf

6q8s6p21 · 发表于 2023-8-17 00:16:58

的谁vdvdsvdsvdsdsv

Anthonylam · 发表于 2023-9-2 20:52:45

刷屏刷屏刷屏

回复用户5 · 发表于 2023-10-18 03:54:21

源码源码源码源码源码源码源码源码源码源码源码源码源码

账号		自动登录	找回密码
密码			立即注册

[JavaScript] js 实现 input type="file" 文件上传示例代码

相关帖子

[JavaScript] js 实现 input type=&quot;file&quot; 文件上传示例代码

相关帖子

[JavaScript] js 实现 input type="file" 文件上传示例代码