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 相关文章推荐
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
JS代码优化的8点建议
Feb 04 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
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 smarty函数扩展
2010/03/15 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
python中执行shell命令的几个方法小结
2014/09/18 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
python sort、sort_index方法代码实例
2019/03/28 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
Python tkinter模版代码实例
2020/02/05 Python
Python批量启动多线程代码实例
2020/02/18 Python
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
高中自我评价分享
2013/12/05 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
预防煤气中毒方案
2014/06/16 职场文书
美化环境标语
2014/06/20 职场文书
二年级学生期末评语
2014/12/26 职场文书