[置顶] 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
        {
             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
        {
             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
        {
             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
        {
             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;
             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;
                 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"标记才能上传文件