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 相关文章推荐
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
js字符串操作方法实例分析
May 06 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
vue实现tab栏点击高亮效果
Aug 19 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
大师制作的中短波矿石收音机
2020/04/02 无线电
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
实例解析Array和String方法
2016/12/14 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
Python3多线程操作简单示例
2018/05/22 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
vscode调试django项目的方法
2020/08/06 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
入党积极分子介绍信
2014/01/17 职场文书
运动会的口号
2014/06/09 职场文书
预备党员入党感言
2015/08/01 职场文书
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js