js 实现 <input type="file" /> 文件上传

来源：互联网发布：大数据技术应用编辑：程序博客网时间：2024/06/07 04:58

在开发中，文件上传必不可少，<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" />后台亦可以获取到要上传的文件了。

总结：

1.用一个不透明度为0的 <input type="file" />盖在要用户可见的标签（或图片等）上，让用户点击。

2.用 width height line-height font-size 来控制<input type="file" />右侧浏览按钮的大小。

3.用 left top （right 、 bottum）来控制<input type="file" />右侧浏览按钮的位置，可以设置为负值。

4.用z-index来设置它们的层覆盖关系。

5.form 必须有enctype="multipart/form-data"标记才能上传文件