Html中file实现多文件上传

今天遇到一个问题要用file实现多文件上传，实现效果需要把file控件用span或则div来遮盖

实现效果如图：

实现的代码如下：

 <div id="uploadImg" class="uploadImg">
        <input type="file" id="file1" name="file1" size="1" class="file" />
        <a href="#">上传文件</a>
    </div>

　　当然到这里只是实现了单文件上传，有关样式的设置请看File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器

需要我们用js来动态创建file控件。由于file控件的特殊性，它不能通过clone来创建（ie下不可以，ff下可以）。还有一点就是新建的file控件必须放到div里面第一个元素。

具体的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Upload</title>
    <style type="text/css">
        .uploadImg
        {
            font-size: 12px;
            overflow: hidden;
            position: absolute;
        }
        .file
        {
            position: absolute;
            z-index: 100;
            margin-left: -180px;
            font-size: 60px;
            opacity: 0;
            filter: alpha(opacity=0);
            margin-top: -5px;
        }
        li div
        {
            display: inline;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
</head>
<body>
    <form id="form1" runat="server" enctype="multipart/form-data" method="POST">
    <div id="uploadImg" class="uploadImg">
        <input type="file" id="file1" name="file1" size="1" class="file" />
        <a href="#">上传文件</a>
    </div>
    <div style="display: block; position: absolute">
        <p>
            已选则文件:</p>
        <ul id="upfiles">
        </ul>
        <br />
        <asp:Button ID="btnUpload" runat="server" Text="Submit" OnClick="btnUpload_Click" />
    </div>
    <script type="text/javascript">
        $(function () {

            (function (i) {
                $(".uploadImg").click(
                    function () {
                        $(".uploadImg .file").first().change(function () {
                            i = i + 1;
                            var html = ' <input type="file" size="1" id="file' + i + '" name="file' + i + '" class="file" />';
                            var oldelem = $("#file" + (i - 1));
                            $(html).insertBefore(oldelem);
                            $(".uploadImg").append(oldelem.hide());

                            var uphtml = $(' <li><div>' + $(this).val() + '</div><div class="del" data="' + $(this).attr("id") + '">删除</div></li>');
                            $("#upfiles").append(uphtml);
                        });
                    });
            })(1);

            $(".del").live("click", function () {
                var id = $(this).attr("data");
                $("#" + id).remove();
                $(this).parent("li").remove();

            });

        });
    </script>
    <br />
    <br />
    </form>
</body>
</html>

 protected void btnUpload_Click(object sender, EventArgs e)
        {
          string path=  Server.MapPath("uploads");
            foreach (string key in Request.Files)
            {
                HttpPostedFile file = Request.Files[key];
                if (file != null && file.ContentLength > 0)
                {
                    file.SaveAs(Path.Combine(path,file.FileName));
                    Response.Write(file.FileName);
                }
            }
        }

　　实现效果如图：