`

Asp.Net文件上传之多文件上传

ASP.netASP.netJavaScriptXHTML 
阅读更多

固定数量的多文件上传:

 

界面参考:

 

    //单击执行多文件上传
    protected void btnFileUpload_Click(object sender, EventArgs e)
    {
        //判断是否存在上传文件
        /*bool flag = false; ;
        bool[] b = { FileUpload1.HasFile, FileUpload2.HasFile, FileUpload3.HasFile };
        foreach (bool item in b)
        {
            if (item)
            {
                flag = true;
            }
        }*/

        //判断是否存在上传文件
        if (!FileUpload1.HasFile && !FileUpload2.HasFile && !FileUpload3.HasFile)
        {
            lblMessage.Text = "至少选择一个上传的文件!";
        }
        else
        {
            /*提供对客户端上载文件的访问,并组织这些文件,它是一个文件的集合.
            Request.Files获取客户端上载文件的集合*/
            HttpFileCollection filecoll = Request.Files;

            //循环上传文件的集合,并上传每一个文件
            for (int i = 0; i < filecoll.Count; i++)
            {
                /*得到上传的单个文件,
                 * 通过HttpPostedFile实例来处理单个上传文件的访问*/
                HttpPostedFile myfile = filecoll[i];

                //得到上传文件大小判断文件是否存在
                if (myfile.ContentLength > 0)
                {
                    if (myfile.ContentLength < 10485760)
                    {
                        try
                        {
                            //得到上传的文件名
                            myfile.SaveAs(Page.MapPath("~/Files/") + 
                            myfile.FileName.Substring(myfile.FileName.LastIndexOf(@"\") + 1));
                            
                            //这里得到上传文件名的方式还可以是:
                            /* myfile.SaveAs(Page.MapPath("~/Files/") 
                            + System.IO.Path.GetFileName(myfile.FileName));*/

                            lblMessage.Text = "文件上传成功!";
                        }
                        catch (Exception)
                        {
                            lblMessage.Text = "上传文件发生错误!";
                        }
                    }
                    else
                    {
                        lblMessage.Text = "上传文件不能大于10MB";
                    }
                }
            }
        }
    }

 

   动态的添加多文件上传:

   1.服务器端实现(动态添加FileUpload控件)

   2.客户端实现(javascript)

   

   服务器端实现(动态添加FileUpload控件)示例:

   界面参考:

  

   

  /*设置添加FileUpLoad控件的个数,
    保存FileUpload控件的个数也可以用Session实现*/
    private int Count
    {
        get { return Convert.ToInt32(ViewState["count"]); }
        set { ViewState["count"] = value; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        //设置添加FileUpLoad控件的个数初始值为:0;
        if (!IsPostBack)
        {
            ViewState["count"] = 0;
        }
    }

    //创建FileUpLoad控件
    private void CreateOrDeleteFileUpload(int count)
    {
        FileUpload fileupload = null;
        //遍历创建FileUpload
        for (int i = 0; i < count; i++)
        {
            fileupload = new FileUpload();
            //设置FileUpload的Id
            fileupload.ID = "fileupLoad" + i.ToString();
            //将FileUpload添加到Panel控件中
            Panel1.Controls.Add(fileupload);
        }
    }

    //点击添加上传控件
    protected void btnAddUpload_Click(object sender, EventArgs e)
    {
        CreateOrDeleteFileUpload(++Count);
    }

    //点击添加更新控件
    protected void btnDeleteFileUpload_Click(object sender, EventArgs e)
    {
        CreateOrDeleteFileUpload(--Count);
    }

    //点击上传
    protected void btnUpload_Click(object sender, EventArgs e)
    {
        HttpFileCollection fileColl = Request.Files;

        for (int i = 0; i < fileColl.Count; i++)
        {
            HttpPostedFile gpf = fileColl[i];
            if (gpf.ContentLength > 0)
            {
                try
                {
                    gpf.SaveAs(Page.MapPath("~/Files/") + 
                    gpf.FileName.Substring(gpf.FileName.LastIndexOf(@"\") + 1));
                    lblMessage.Text = "上传文件成功!";
                }
                catch (Exception)
                {
                    lblMessage.Text = "文件上传发生错误!";
                }
            }
        }
    }

 

   客户端实现(javascript)示例:

   推荐使用客户端方式,因为服务端方式每次点击删除按钮都会向服务器提交一次.

   

<body>
    <!--HTML的文件上传控件上传需要修改enctype属性-->
    <form id="form1" runat="server" enctype="multipart/form-data">
    <div>
        <div id="panel">
        </div>
        <input type="hidden" value="1" id="filecount" />
        <input type="button" value="添加上传组件" onclick="javascript:AddFileUpLoad();" />
        <asp:Button ID="btnUpLoad" runat="server" onclick="btnUpLoad_Click" 
            Text="文件上传" />
        <asp:Label ID="lblMessage" runat="server"></asp:Label>
    </div>
    </form>
</body>

 

    

 <script type="text/javascript">
    //添加上传控件
    function AddFileUpLoad(){
        //得到上传文件控件的文件名.
        var name="file"+document.form1.filecount.value;
        
        //设置隐藏表单域的值加1,下次得到上传控件的名字就不会相同
        document.form1.filecount.value=parseInt(document.form1.filecount.value)+1;
        
        /*在id为panel的div元素的标签结束之前添加上传控件和删除按钮
         <button onclick='javascirpt:removeFile(this);'>删除</button>
         删除按钮把当前对象传给删除上传控件的函数
        */
        panel.insertAdjacentHTML("beforeEnd","<div><input type='file' name="+name
        +"><button onclick='javascirpt:removeFile(this);'>删除</button></div>");
    }
    
    //删除控件
    function removeFile(obj){
        //得到该对象的父节点元素然后删除该父节点
        obj.parentElement.removeNode(true);
    }
    </script>

 

 

    

 //单击上传文件
    protected void btnUpLoad_Click(object sender, EventArgs e)
    {
        HttpFileCollection fileColl = Request.Files;

        for (int i = 0; i < fileColl.Count; i++)
        {
            HttpPostedFile gpf = fileColl[i];
            if (gpf.ContentLength > 0)
            {
                try
                {
                    gpf.SaveAs(Page.MapPath("~/Files/") +
                    gpf.FileName.Substring(gpf.FileName.LastIndexOf(@"\") + 1));
                    lblMessage.Text = "上传文件成功!";
                }
                catch (Exception)
                {
                    lblMessage.Text = "文件上传发生错误!";
                }
            }
        }
    }

 

JS实现带图片预览功能的FileUpload控件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>

<!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 runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
    var timeOut;
    function previewImage(upload){
        //判断选择的文件是否为空
        if(!upload||!upload.value){
            return;
        }
        
        //验证是否是以.jpg等后缀名结尾
      var extend=/\.jpg$|\.jpeg$|\.gif$/i; 
      
      if(extend.test(upload.value)){
      
           var img=document.getElementById("img");
          
           if(img){
                clearTimeout(timeOut);
                img.src='file://localhost/'+upload.value;
                img.style.display="block";
                //设置5秒后图片隐藏
                timeOut=setTimeout("hidden()",5000);
           }else{
            clearTimeout(timeOut);
            var img=document.createElement("img");
            img.setAttribute('src','file://localhost/'+upload.value);
            img.setAttribute("width",'120');
            img.setAttribute('height','90');
            img.setAttribute('id','img');
            document.getElementById('form1').appendChild(img);
            timeOut=setTimeout("hidden()",5000);
           }
      }else{
        alert("你似乎选择的不是图像文件");
      }
    }
    //隐藏图片
    function hidden(){
        clearTimeout(timeOut);
        var img=document.getElementById("img");
        if(img){
            img.style.display="none";
        }
    }
   
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" onchange="javascript:previewImage(this);" />
        <asp:Button ID="Button1" runat="server" Text="上传" />
    </div>
    </form>
</body>
</html>

 

  • 大小: 6.3 KB
  • 大小: 13.8 KB
分享到：
| Asp.Net文件上传之简单文件上传(下)
评论
1 楼 天闲降世 2010-03-29  
好是好，但是如果只用一个控件实现多个文件上传的化是不是更好些呢？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics