脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 实现文件上传

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

 更新时间：2013年08月07日 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"标记才能上传文件
您可能感兴趣的文章:

相关文章

  • 微信小程序用户拒绝授权的处理方法详解

    微信小程序用户拒绝授权的处理方法详解

    这篇文章主要介绍了微信小程序用户拒绝授权的处理方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 高性能Javascript笔记 数据的存储与访问性能优化

    高性能Javascript笔记 数据的存储与访问性能优化

    在JavaScript中，数据的存储位置对代码的整体性能有着重要的影响。有四种数据访问类型：直接量，局部变量，数组项，对象成员
    2012-08-08
  • 微信小程序实现评价功能

    微信小程序实现评价功能

    这篇文章主要为大家详细介绍了微信小程序实现评价功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • Javascript实现动态菜单添加的实例代码

    Javascript实现动态菜单添加的实例代码

    在注册信息的时候，常常需要通过下拉菜单让用户选择，而且希望用户在第一个下拉框做的选择，影响第二个下拉框的内容。有时候，如果第一个下拉框不作出选择，第二个下拉框根本不会页面上显示，为了给用户呈现一个更清晰的页面。
    2013-07-07
  • LayUI switch 开关监听 获取属性值、更改状态的方法

    LayUI switch 开关监听 获取属性值、更改状态的方法

    今天小编就为大家分享一篇LayUI switch 开关监听 获取属性值、更改状态的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript 闭包

    javascript 闭包

    闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分，本文将用通俗的语言带您深入理解Javascript闭包的概念。
    2011-09-09
  • JS实现在网页中弹出一个输入框的方法

    JS实现在网页中弹出一个输入框的方法

    这篇文章主要介绍了JS实现在网页中弹出一个输入框的方法,实例分析了prompt的用法,可用来设置密码,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • Javascript Function对象扩展之延时执行函数

    Javascript Function对象扩展之延时执行函数

    这篇文章主要介绍 在js里面怎么延时执行一个函数?
    2010-07-07
  • javascript不同类型数据之间的运算的转换方法

    javascript不同类型数据之间的运算的转换方法

    这篇文章主要介绍了javascript不同类型数据之间的运算的转换方法,需要的朋友可以参考下
    2014-02-02
  • 前端实现文本溢出展开和收起功能

    前端实现文本溢出展开和收起功能

    在现代网页设计中,文本是网页中最重要的内容之一,然而,当文本超出其容器的大小时,会发生文本溢出的问题,文本溢出不仅会影响网页的视觉效果,还会影响网页的可读性和可用性,所以本文给大家介绍了前端实现文本溢出展开和收起功能的方法,需要的朋友可以参考下
    2025-04-04

最新评论