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 查找select ,并触发事件的实现代码
Mar 30 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
js实现简单选项卡制作
Aug 05 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中使用Imagick实现各种图片效果实例
2015/01/21 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
浅析python中的分片与截断序列
2016/08/09 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
django基于restframework的CBV封装详解
2019/08/08 Python
python sqlite的Row对象操作示例
2019/09/11 Python
解决Django no such table: django_session的问题
2020/04/07 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
高三高考决心书
2014/03/11 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
北京爱情故事观后感
2015/06/12 职场文书
男人帮观后感
2015/06/18 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
学习党史心得体会2016
2016/01/23 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
javascript对象3个属性特征
2021/11/17 Javascript
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers