Asp.net实现多个文件上传

 我们在实际开发中，通常会遇到同时上传多个文件的功能。如何实现？

今天我特地作了一个小示例：能同时上传5个文件。当然，也可以更多：

1.用到的技术有：jquery，Asp.net

2.asp页面：添加5个 FileUpload 控件及相关 LinkButon ，FileUpload 有4个是最开始是隐藏的。通过点击相关的LinkButon实现显示及隐藏。

   页面代码:

   <div style="height: 408px; width: 724px">
   <h1>一次上传多个图片并预览，请选择图片：</h1>      
       <div id="p1"><asp:FileUpload ID="FileUpload1" οnchange="CheckImgCss(this, 'img1');" runat="server" />&nbsp;
            <input type="button" id="btn1" class="input" value="添 加"/>
        </div>
        <div id="p2" style="display:none;"><asp:FileUpload ID="FileUpload2" οnchange="CheckImgCss(this, 'img2');" runat="server" />&nbsp;
            <input type="button" id="btn2" class="input" value="添 加"/>
            <input type="button" id="btn8" class="input" value="删 除"/>
        </div>
        <div id="p3" style="display:none;"><asp:FileUpload ID="FileUpload3" οnchange="CheckImgCss(this, 'img3');" runat="server" />&nbsp;
            <input type="button" id="btn3" class="input" value="添 加"/>
            <input type="button" id="btn7" class="input" value="删 除"/>
        </div>
        <div id="p4" style="display:none;"><asp:FileUpload ID="FileUpload4" οnchange="CheckImgCss(this, 'img4');" runat="server" />&nbsp;
            <input type="button" id="btn4" class="input" value="添 加"/>
            <input type="button" id="btn6" class="input" value="删 除"/>
        </div>
        <div id="p5" style="display:none;"><asp:FileUpload ID="FileUpload5" οnchange="CheckImgCss(this, 'img5');" runat="server" />
            <input type="button" id="btn5" class="input" value="删 除"/>
        </div>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="上传" />
        <br />         
        <%--这几个图片框用于成功之后的预览--%>
        <div id="img1" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=<%= pic[0]%>,sizingMethod=scale);width:60px;height:60px; float:left;"></div>
        <div id="img2" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=<%= pic[1]%>,sizingMethod=scale);width:60px;height:60px; float:left;"></div>
        <div id="img3" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=<%= pic[2]%>,sizingMethod=scale);width:60px;height:60px; float:left;"></div>
        <div id="img4" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=<%= pic[3]%>,sizingMethod=scale);width:60px;height:60px; float:left;"></div>
        <div id="img5" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=<%= pic[4]%>,sizingMethod=scale);width:60px;height:60px; float:left;"></div> 
     </div>

    JavaScript代码：

    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
         $(document).ready(function () {       //控制FileUpload控件的显示及隐藏
             $("#btn1").click(function () {
                 $("#p2").show();
             });        
             $("#btn2").click(function () {
                 $("#p3").show();
             });       
             $("#btn3").click(function () {
                 $("#p4").show();
             });       
             $("#btn4").click(function () {
                 $("#p5").show();
             });       
             $("#btn5").click(function () {
                 $("#p5").hide();
             });        
             $("#btn6").click(function () {
                 $("#p4").hide();
             });       
             $("#btn7").click(function () {
                 $("#p3").hide();
             });        
             $("#btn8").click(function () {
                 $("#p2").hide();
             });
         });
    </script>
    <script language="javascript" type="text/javascript">
        function pic(o) { return document.getElementById(o); }    //此函数判断上传文件类型，只能上传图片格式
        function CheckImgCss(o, img) {
            if (!/\.((jpg)|(bmp)|(gif)|(png))$/ig.test(o.value)) {
                alert('只能上传jpg,bmp,gif,png格式图片!');
                o.outerHTML = o.outerHTML;
            }
            else {
                pic(img).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = o.value;
                //$('Image1').src = o.value;//这里IE7已经不支持了。所以才有上面的方法。
            }
        }       
    </script>

3.后置代码文件

 //该全局变量用来修改的时候的默认值。例如上传自己的头像，如果用户修改头像，这里可以显示他原来的头像。
 public string [] pic={"pic1","pic2","pic3","pic4","pic5"};

//上传按钮点击事件
protected void Button1_Click(object sender, EventArgs e)
    {
        Random r = new Random();   //随机数对象
        //这样循环，可以同时上传多个文件。前台已经有文件格式的判断，有错误提示了。这里只要过滤掉非法文件即可，无需提示了。
        for (int i = 0; i < Request.Files.Count; i++)
        {
            if (Request.Files[i].ContentLength > 0)
            {
                string ex = System.IO.Path.GetExtension(Request.Files[i].FileName).ToLower();
                if (".jpg.gif.png.bmp".Contains(ex))
                {
                    string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss") + r.Next(100, 999).ToString() + ex;
                    //保存文件名到数据库代码略.......
                    //xxxxxxxxxxxxxxxx
                    //xxxxxxxxxxxxxxxx

                    Request.Files[i].SaveAs(Server.MapPath(newFileName));  //上传图片到服务器，注意：此路径为页面文件的路径。

                    pic[i] = newFileName;  //图片预览设置
                }
            }
        }
    }