模拟126邮箱实现一次上传多个附件的例子

最近,有好些网友问到类似的问题,我于是就做了个简单的例子,相信大家一看就明白。

有一点说明的是:对于file控件,必须点击他本身才可能完成对文件的上传,通过脚本打开选择文件对话框以后是无法再上传文件的,这也许是基于安全的考虑,即必须用户本人主观去上传本机的文件,否则本机文件有可能被脚本恶决上传。

 我这里只充许上传jpg和gif图片,当然你可以根据需要自己修改。

请看示例:

view plaincopy to clipboardprint?
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="UpFile.aspx.cs" Inherits="csdn.UI.UpFile" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>文件列表</title> 
    <mce:style><!--  
            .attach  
            {  
                height:10px;    
                  
                border-left:solid 1px white;  
                border-right:solid 1px gray;    
                border-top:solid 1px white;  
                border-bottom:solid 1px gray;  
                background-color:#eeeef1;    
                padding:0px;  
            }    
            
            .divFileInfo  
            {  
                width:400px;  
                border:dotted 1px orange;  
                height:150px;     
            }    
           .spText  
           {  
                  position:relative;   
                bottom:3px;  
               padding-left:5px;   
              padding-right:5px;   
           }    
          .myhelp  
          {  
            padding-left:0px;   
              
              
          }   
          .myhelp li  
          {  
            list-style:none;  
            line-height:22px;     
            padding-left:0px;   
          }   
             .divupload  
            {  
                font-size:12px;  
                width:400px;  
                background-color:White;  
                border:solid 1px #336699;  
                padding:10px;  
               margin:auto;  
              margin-top:100px;   
            }  
              
            td  
            {  
                font-family:@Tahoma;  
            }  
           
              
           
            .aclose  
            {  
               color:blue;  
            }  
            .aclose:hover  
            {  
                color:red;  
            }  
            body  
            {  
                margin:0;  
                font-size:12px;  
            }  
              
            HTML,BODY,FORM  
            {  
                 height:100%;   
            }  
             
          .inputfile  
          {  
                cursor:pointer !important;  
 
                height:18px;  
 
                left:-13px;  
 
                filter:alpha(opacity=0);   
                top:1px;  
                width:1px;  
          }    
          .fileparent  
          {  
            background-image:url(https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/addimg.jpg);  
 
            background-repeat:no-repeat;  
            display:block;  
 
            float:left;  
 
            height:20px;  
 
            margin-top:-1px;  
 
            position:relative;  
 
            text-decoration:none;  
 
            top:0pt;  
 
            width:80px;  
 
          }  
          
--></mce:style><style mce_bogus="1">            .attach  
            {  
                height:10px;    
                  
                border-left:solid 1px white;  
                border-right:solid 1px gray;    
                border-top:solid 1px white;  
                border-bottom:solid 1px gray;  
                background-color:#eeeef1;    
                padding:0px;  
            }    
            
            .divFileInfo  
            {  
                width:400px;  
                border:dotted 1px orange;  
                height:150px;     
            }    
           .spText  
           {  
                  position:relative;   
                bottom:3px;  
               padding-left:5px;   
              padding-right:5px;   
           }    
          .myhelp  
          {  
            padding-left:0px;   
              
              
          }   
          .myhelp li  
          {  
            list-style:none;  
            line-height:22px;     
            padding-left:0px;   
          }   
             .divupload  
            {  
                font-size:12px;  
                width:400px;  
                background-color:White;  
                border:solid 1px #336699;  
                padding:10px;  
               margin:auto;  
              margin-top:100px;   
            }  
              
            td  
            {  
                font-family:@Tahoma;  
            }  
           
              
           
            .aclose  
            {  
               color:blue;  
            }  
            .aclose:hover  
            {  
                color:red;  
            }  
            body  
            {  
                margin:0;  
                font-size:12px;  
            }  
              
            HTML,BODY,FORM  
            {  
                 height:100%;   
            }  
             
          .inputfile  
          {  
                cursor:pointer !important;  
 
                height:18px;  
 
                left:-13px;  
 
                filter:alpha(opacity=0);   
                top:1px;  
                width:1px;  
          }    
          .fileparent  
          {  
            background-image:url(https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/addimg.jpg);  
 
            background-repeat:no-repeat;  
            display:block;  
 
            float:left;  
 
            height:20px;  
 
            margin-top:-1px;  
 
            position:relative;  
 
            text-decoration:none;  
 
            top:0pt;  
 
            width:80px;  
 
          }  
        </style> 
    <base target="_self" /> 
</head> 
<body> 
    <form id="Form1" method="post" runat="server"> 
        <input type="hidden" id="hidIds" runat="server"> 
        <div id="divupload" class="divupload"> 
            <div> 
                <ul class="myhelp"> 
                    <li>说明:</li> 
                    <li>1、点击“添加图片”可以添加多个图片文件。</li> 
                    <li>3、点击“上传“可以将添加的图片批量上传到我的图片库。 </li> 
                </ul> 
            </div> 
            <a id="divFileParent" class="fileparent" hidefocus="true" href="javascript:void(1==1);" mce_href="javascript:void(1==1);"> 
                <input type="file" id="file1" size="1" class="inputfile" runat="server" οnchange="javascript:SetValue(this)" /> 
            </a> 
            <br /> 
            <div id="divFileInfo" class="divFileInfo"> 
            </div> 
            <div id="divFileList"> 
            </div> 
            <br /> 
            <div style="text-align: center" mce_style="text-align: center"> 
                <asp:Button ID="Button1" runat="server" CssClass="btn80" Text="上传" OnClientClick="javascript:return DoConfirmUp();" 
                    OnClick="btnUpLoad"></asp:Button> 
                <input type="button" value="取消" class="btn" οnclick="javascript:HideUpLoad();" /> 
            </div> 
        </div> 
    </form> 
 
    <mce:script language="javascript"><!--  
          
  String.prototype.Trim=function()  
{  
        return this.replace(/(^/s*)|(/s*$)/g,"");  
}  
   
       var gFileCount  = 1;   
       var gFileNameIndex = 1;//命名用的。只增不减,少免重复。  
         
       var aryFileName = new Object();  
      function SetValue(file)  
      {  
         if(file.value.Trim() == "") return;  
          
         var div = document.createElement("span");  
         var ary = file.value.split("//");  
         var filename = ary[ary.length-1];     
         var extAry = filename.split('.');  
         if(extAry[extAry.length-1].toLowerCase() != "jpg"  
          &&  extAry[extAry.length-1].toLowerCase() != "jpeg"  
         )  
         {  
               alert("只能是jpeg文件!");  
               return;   
         }     
         if (aryFileName[filename] == 1)  
         {  
            alert("该文件已经在附件中!");   
            file.parentNode.removeChild(file);//要不然有可能不能触发onchange  
            CreateFile();    
            return;   
         }   
          aryFileName[filename] = 1;  
          $("divFileList").appendChild(file);      
         div.innerHTML =   "<img src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/jpg.gif" mce_src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/jpg.gif" ><span class='spText'>"+filename+"</span><img  src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/tabclosesel.jpg" mce_src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/tabclosesel.jpg" fileid='"+file.id  
          
         +"' title='删除附件' filename='"+filename+"'  style="cursor:pointer" mce_style="cursor:pointer" οnclick='javascripot:GoDeleteFile(this)'>";  
         div.className = "attach";   
         file.style.display = "none";   
         $("divFileInfo").appendChild(div);      
         CreateFile();    
            
      }  
      
    function $(id){return document.getElementById(id)}  
   function DoConfirmUp()  
   {  
        if(gFileCount ==1)  
        {  
            alert("请选择附件!");  
            return false;   
        }   
        return confirm("确定要上传所选中的附件吗?");   
   }   
    function GoDeleteFile(img)  
    {  
        var fileid = img.getAttribute("fileid");  
        var file = $(fileid);  
        if(file !=null)  
        {  
           $("divFileList").removeChild(file);  
        }     
        img.parentNode.parentNode.removeChild(img.parentNode);  
        var filename = img.getAttribute("filename");    
        aryFileName[filename] = null;  
       gFileCount -- ;   
          
    }    
 
      function CreateFile()  
      {  
            gFileCount++;  
           gFileNameIndex ++; //合   
            var file = document.createElement("INPUT");  
            file.type = "file";  
            file.id = "file"+gFileNameIndex;    
            filefile.name = file.id;   
            file.className = "inputfile";   
            $("divFileParent").appendChild(file);  
            file.onchange = function()  
            {  
                SetValue(file);   
            }   
      }  
 
 
    function CheckValue(context,result)  
    {  
        var v = $("txtName").value;  
        vv = v.toLowerCase();  
        var reg = new RegExp("/.(jpg|bmp|gif|png)$");  
        reg.ignoreCase = true;  
          
        if(reg.exec(v) == null)  
        {  
            result.IsValid = false;  
        }else  
        {  
            result.IsValid = true;  
        }  
    }  
// --></mce:script> 
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="UpFile.aspx.cs" Inherits="csdn.UI.UpFile" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>文件列表</title>
    <mce:style><!--
            .attach
            {
                height:10px; 
               
                border-left:solid 1px white;
                border-right:solid 1px gray; 
                border-top:solid 1px white;
                border-bottom:solid 1px gray;
                background-color:#eeeef1; 
                padding:0px;
            } 
         
            .divFileInfo
            {
                width:400px;
                border:dotted 1px orange;
                height:150px;  
            } 
           .spText
           {
                  position:relative;
                bottom:3px;
               padding-left:5px;
              padding-right:5px;
           } 
          .myhelp
          {
            padding-left:0px;
           
           
          }
          .myhelp li
          {
            list-style:none;
            line-height:22px;  
            padding-left:0px;
          }
             .divupload
      {
          font-size:12px;
          width:400px;
          background-color:White;
          border:solid 1px #336699;
             padding:10px;
         margin:auto;
        margin-top:100px;
      }
     
      td
      {
          font-family:@Tahoma;
      }
  
     
  
      .aclose
      {
         color:blue;
      }
      .aclose:hover
      {
          color:red;
      }
      body
      {
          margin:0;
          font-size:12px;
      }
     
      HTML,BODY,FORM
      {
           height:100%;
      }
    
    .inputfile
    {
          cursor:pointer !important;

                height:18px;

                left:-13px;

                filter:alpha(opacity=0);
                top:1px;
                width:1px;
    } 
    .fileparent
    {
      background-image:url(https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/addimg.jpg);

            background-repeat:no-repeat;
            display:block;

            float:left;

            height:20px;

            margin-top:-1px;

            position:relative;

            text-decoration:none;

            top:0pt;

            width:80px;

    }
  
--></mce:style><style mce_bogus="1">            .attach
            {
                height:10px; 
               
                border-left:solid 1px white;
                border-right:solid 1px gray; 
                border-top:solid 1px white;
                border-bottom:solid 1px gray;
                background-color:#eeeef1; 
                padding:0px;
            } 
         
            .divFileInfo
            {
                width:400px;
                border:dotted 1px orange;
                height:150px;  
            } 
           .spText
           {
                  position:relative;
                bottom:3px;
               padding-left:5px;
              padding-right:5px;
           } 
          .myhelp
          {
            padding-left:0px;
           
           
          }
          .myhelp li
          {
            list-style:none;
            line-height:22px;  
            padding-left:0px;
          }
             .divupload
      {
          font-size:12px;
          width:400px;
          background-color:White;
          border:solid 1px #336699;
             padding:10px;
         margin:auto;
        margin-top:100px;
      }
     
      td
      {
          font-family:@Tahoma;
      }
  
     
  
      .aclose
      {
         color:blue;
      }
      .aclose:hover
      {
          color:red;
      }
      body
      {
          margin:0;
          font-size:12px;
      }
     
      HTML,BODY,FORM
      {
           height:100%;
      }
    
    .inputfile
    {
          cursor:pointer !important;

                height:18px;

                left:-13px;

                filter:alpha(opacity=0);
                top:1px;
                width:1px;
    } 
    .fileparent
    {
      background-image:url(https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/addimg.jpg);

            background-repeat:no-repeat;
            display:block;

            float:left;

            height:20px;

            margin-top:-1px;

            position:relative;

            text-decoration:none;

            top:0pt;

            width:80px;

    }
  </style>
    <base target="_self" />
</head>
<body>
    <form id="Form1" method="post" runat="server">
        <input type="hidden" id="hidIds" runat="server">
        <div id="divupload" class="divupload">
            <div>
                <ul class="myhelp">
                    <li>说明:</li>
                    <li>1、点击“添加图片”可以添加多个图片文件。</li>
                    <li>3、点击“上传“可以将添加的图片批量上传到我的图片库。 </li>
                </ul>
            </div>
            <a id="divFileParent" class="fileparent" hidefocus="true" href="javascript:void(1==1);" mce_href="javascript:void(1==1);">
                <input type="file" id="file1" size="1" class="inputfile" runat="server" οnchange="javascript:SetValue(this)" />
            </a>
            <br />
            <div id="divFileInfo" class="divFileInfo">
            </div>
            <div id="divFileList">
            </div>
            <br />
            <div style="text-align: center" mce_style="text-align: center">
                <asp:Button ID="Button1" runat="server" CssClass="btn80" Text="上传" OnClientClick="javascript:return DoConfirmUp();"
                    OnClick="btnUpLoad"></asp:Button>
                <input type="button" value="取消" class="btn" οnclick="javascript:HideUpLoad();" />
            </div>
        </div>
    </form>

    <mce:script language="javascript"><!--
       
  String.prototype.Trim=function()
{
        return this.replace(/(^/s*)|(/s*$)/g,"");
}
 
       var gFileCount  = 1;
       var gFileNameIndex = 1;//命名用的。只增不减,少免重复。
      
       var aryFileName = new Object();
      function SetValue(file)
      {
         if(file.value.Trim() == "") return;
       
         var div = document.createElement("span");
         var ary = file.value.split("//");
         var filename = ary[ary.length-1];  
         var extAry = filename.split('.');
         if(extAry[extAry.length-1].toLowerCase() != "jpg"
          &&  extAry[extAry.length-1].toLowerCase() != "jpeg"
         )
         {
               alert("只能是jpeg文件!");
               return;
         }  
         if (aryFileName[filename] == 1)
         {
            alert("该文件已经在附件中!");
            file.parentNode.removeChild(file);//要不然有可能不能触发onchange
            CreateFile(); 
            return;
         }
          aryFileName[filename] = 1;
          $("divFileList").appendChild(file);   
         div.innerHTML =   "<img src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/jpg.gif" mce_src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/jpg.gif" ><span class='spText'>"+filename+"</span><img  src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/tabclosesel.jpg" mce_src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/tabclosesel.jpg" fileid='"+file.id
       
         +"' title='删除附件' filename='"+filename+"'  style="cursor:pointer" mce_style="cursor:pointer" οnclick='javascripot:GoDeleteFile(this)'>";
         div.className = "attach";
         file.style.display = "none";
         $("divFileInfo").appendChild(div);   
         CreateFile(); 
         
      }
   
    function $(id){return document.getElementById(id)}
   function DoConfirmUp()
   {
        if(gFileCount ==1)
        {
            alert("请选择附件!");
            return false;
        }
        return confirm("确定要上传所选中的附件吗?");
   }
    function GoDeleteFile(img)
    {
        var fileid = img.getAttribute("fileid");
        var file = $(fileid);
        if(file !=null)
        {
           $("divFileList").removeChild(file);
        }  
        img.parentNode.parentNode.removeChild(img.parentNode);
        var filename = img.getAttribute("filename"); 
        aryFileName[filename] = null;
       gFileCount -- ;
       
    } 

      function CreateFile()
      {
            gFileCount++;
           gFileNameIndex ++; //合
            var file = document.createElement("INPUT");
            file.type = "file";
            file.id = "file"+gFileNameIndex; 
            file.name = file.id;
            file.className = "inputfile";
            $("divFileParent").appendChild(file);
            file.onchange = function()
            {
                SetValue(file);
            }
      }


    function CheckValue(context,result)
    {
        var v = $("txtName").value;
        v = v.toLowerCase();
        var reg = new RegExp("/.(jpg|bmp|gif|png)$");
        reg.ignoreCase = true;
       
        if(reg.exec(v) == null)
        {
            result.IsValid = false;
        }else
        {
            result.IsValid = true;
        }
    }
// --></mce:script>
 

 

后台只是为了验证文件是否上传,至于保存相当简单就不多写了。

 view plaincopy to clipboardprint?
protected void btnUpLoad(object sender, EventArgs e)  
       {  
           for (int i = 0; i < Request.Files.Count; i++)  
           {  
               Response.Write(Request.Files[i].FileName+"<BR>");  
               //Request.Files[i].SaveAs(Path);如果要保存  
           }  
       } 

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/cpp2017/archive/2009/08/07/4418202.aspx

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值