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

最新推荐文章于 2024-04-26 16:47:03 发布

lingling3733

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量3.6k

点赞数

文章标签： javascript function file class button border

本文链接：https://blog.csdn.net/lingling3733/article/details/6202464

版权

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

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

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

请看示例：

01.<%@ Page Language="C#" AutoEventWireup="true" Codebehind="UpFile.aspx.cs" Inherits="csdn.UI.UpFile" %>
02.
03.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04.<html>
05.<head>
06.    <title>文件列表</title>
07.    <mce:style></mce:style><style mce_bogus="1">            .attach
118.            {
119.                height:10px;
120.
121.                border-left:solid 1px white;
122.                border-right:solid 1px gray;
123.                border-top:solid 1px white;
124.                border-bottom:solid 1px gray;
125.                background-color:#eeeef1;
126.                padding:0px;
127.            }
128.
129.            .divFileInfo
130.            {
131.                width:400px;
132.                border:dotted 1px orange;
133.                height:150px;
134.            }
135.           .spText
136.           {
137.                  position:relative;
138.                bottom:3px;
139.               padding-left:5px;
140.              padding-right:5px;
141.           }
142.          .myhelp
143.          {
144.            padding-left:0px;
145.
146.
147.          }
148.          .myhelp li
149.          {
150.            list-style:none;
151.            line-height:22px;
152.            padding-left:0px;
153.          }
154.             .divupload
155.            {
156.                font-size:12px;
157.                width:400px;
158.                background-color:White;
159.                border:solid 1px #336699;
160.                padding:10px;
161.               margin:auto;
162.              margin-top:100px;
163.            }
164.
165.            td
166.            {
167.                font-family:@Tahoma;
168.            }
169.
170.
171.
172.            .aclose
173.            {
174.               color:blue;
175.            }
176.            .aclose:hover
177.            {
178.                color:red;
179.            }
180.            body
181.            {
182.                margin:0;
183.                font-size:12px;
184.            }
185.
186.            HTML,BODY,FORM
187.            {
188.                 height:100%;
189.            }
190.
191.          .inputfile
192.          {
193.                cursor:pointer !important;
194.
195.                height:18px;
196.
197.                left:-13px;
198.
199.                filter:alpha(opacity=0);
200.                top:1px;
201.                width:1px;
202.          }
203.          .fileparent
204.          {
205.            background-image:url(https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/addimg.jpg);
206.
207.            background-repeat:no-repeat;
208.            display:block;
209.
210.            float:left;
211.
212.            height:20px;
213.
214.            margin-top:-1px;
215.
216.            position:relative;
217.
218.            text-decoration:none;
219.
220.            top:0pt;
221.
222.            width:80px;
223.
224.          }
225.        </style>
226.    <base target="_self" />
227.</head>
228.<body>
229.    <form id="Form1" method="post" runat="server">
230.        <input type="hidden" id="hidIds" runat="server">
231.        <div id="divupload" class="divupload">
232.            <div>
233.                <ul class="myhelp">
234.                    <li>说明：</li>
235.                    <li>1、点击“添加图片”可以添加多个图片文件。</li>
236.                    <li>3、点击“上传“可以将添加的图片批量上传到我的图片库。 </li>
237.                </ul>
238.            </div>
239.            <a id="divFileParent" class="fileparent" hidefocus="true" href="javascript:void(1==1);" mce_href="javascript:void(1==1);">
240.                <input type="file" id="file1" size="1" class="inputfile" runat="server" οnchange="javascript:SetValue(this)" />
241.            </a>
242.            <br />
243.            <div id="divFileInfo" class="divFileInfo">
244.            </div>
245.            <div id="divFileList">
246.            </div>
247.            <br />
248.            <div style="text-align: center" mce_style="text-align: center">
249.                <asp:Button ID="Button1" runat="server" CssClass="btn80" Text="上传" OnClientClick="javascript:return DoConfirmUp();"
250.                    OnClick="btnUpLoad"></asp:Button>
251.                <input type="button" value="取消" class="btn" οnclick="javascript:HideUpLoad();" />
252.            </div>
253.        </div>
254.    </form>
255.
256.    <mce:script language="javascript"></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;

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);
            }
      }

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

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

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

lingling3733

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模拟126邮箱实现一次上传多个附件的例子

最近,有好些网友问到类似的问题,我于是就做了个简单的例子，相信大家一看就明白。有一点说明的是：对于file控件，必须点击他本身才可能完成对文件的上传，通过脚本打开选择文件对话框以后是无法再上传文件的，这也许是基于安全的考虑，即必须用户本人主观去上传本机的文件，否则本机文件有可能被脚本恶决上传。我这里只充许上传jpg和gif图片，当然你可以根据需要自己修改。请看示例：view plaincopy to clipboardprint?01. 02. 03.
复制链接

扫一扫