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


Posted in Javascript onAugust 07, 2013

在开发中,文件上传必不可少,<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"标记才能上传文件
Javascript 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
js表单验证实例讲解
Mar 31 Javascript
RequireJs的使用详解
Feb 19 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
详解JavaScript作用域 闭包
Jul 29 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
uploadify在Firefox下丢失session问题的解决方法
Aug 07 #Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 #Javascript
javascript的内存管理详解
Aug 07 #Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 #Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 #Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 #Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 #Javascript
You might like
PHP中,文件上传
2006/12/06 PHP
PHP培训要多少钱
2017/06/06 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
ExtJS的拖拽效果示例
2013/12/09 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
JS验证码实现代码
2017/09/14 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
vue小白入门教程
2018/04/02 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
捐书寄语赠言
2014/01/18 职场文书
伊索寓言教学反思
2014/05/01 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
会计实训报告范文
2014/11/04 职场文书
小学班主任事迹材料
2014/12/17 职场文书
中学生逃课检讨书
2015/02/17 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
茶花女读书笔记
2015/06/29 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
MySQL Router的安装部署
2021/04/24 MySQL
PyTorch 如何自动计算梯度
2021/05/23 Python
nginx安装以及配置的详细过程记录
2021/09/15 Servers