input上传控件美化

来源：互联网发布：java异步日志编辑：程序博客网时间：2024/05/01 04:03

在开发中，文件上传必不可少，<input type="file" /> 是常用的上传标签，但是它长得又丑、浏览的字样不能换，我们一般会用让

<input type="file" />隐藏，点其他的标签（图片等）来实现选择文件上传功能。

<div>     <div class="_box">选择图片</div> </div> <div class="none">     <input type="file" name="_f" id="_f" /> </div> <script type="text/javascript">    $(function () {       $("._box").click(function(){  $("#_f").click();       });    }); </script>

但是在火狐和一些高版本的浏览器中后台可以获取到要上传的文件，一些低版本的浏览器压根就获取不到Request.Files

<script type="text/javascript">    jQuery(function () {       $("._box").click(function () {         return $("#_f").click();      });    }); </script>

加了一个return关键字，兼容性提高了不少，但是有的浏览器还是不好用。我们发现只有手动点击<input type="file" />后台就一定能获取到要上传的文件，于是我们可以透明<input type="file" />

<div class="_box">     <input type="file" name="_f" id="_f" />        选择图片     </div> <style>  ._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>

0 0