js 实现 input type="file" 文件上传示例代码
Posted xuyatao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 实现 input type="file" 文件上传示例代码相关的知识，希望对你有一定的参考价值。
在开发中，文件上传必不可少但是它长得又丑、浏览的字样不能换，一般会让其隐藏点其他的标签（图片等）来时实现选择文件上传功能
在开发中，文件上传必不可少，<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"标记才能上传文件
以上是关于js 实现 input type="file" 文件上传示例代码的主要内容，如果未能解决你的问题，请参考以下文章
js如何获取火狐以及谷歌中<input type="file"/>的本地绝对路径