asp.net2.0中允许一次上传多个文件的设计

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

在asp.net 2.0中，可以结合dhtml来实现在用户上传完一个文件后，再点“继续上传”，而动态增加上传文件框
首先是前台的页面
<script language="javascript" type="text/javascript">
function addFile(max)
{
  var file = document.getElementsByName("File");
  if(file.length == 1 && file[0].disabled == true)
  {
   file[0].disabled = false;
   return;
  }
  if(file.length < max)
  {
   var filebutton = '<br /><input type="file" size="50" name="File" class="Button" />';
   document.getElementById('FileList').insertAdjacentHTML("beforeEnd",filebutton);
  }
}
</script>
</head>
<body>
    <form >
    <table class="Text" border="0" cellpadding="3" bgcolor="Black" cellspacing="1">
  <tr bgcolor="white">
   <td>所属分类：</td>
   <td width="90%">
    <asp:DropDownList ID="ddlCategory" runat="server" SkinID="ddlSkin" Width="336px"></asp:DropDownList>
   </td>
  </tr>
  <tr bgcolor="white">
   <td valign="top">选择照片：</td>
   <td width="90%">
    <table border="0" cellpadding="0" cellspacing="0">
     <tr>
      <td valign="top">
       <p /></p>
      </td>
      <td valign="top"><input type="button" value='增加一张照片' class="Button" onclick="addFile(<%= MAXPHOTOCOUNT %>)" /><font color="red">（最多上传 <%=MAXPHOTOCOUNT%> 张照片）</font><br />　单击此按钮增加一个上传照片按钮。如果文件的名称或者内容为空，则不上传该照片。</td>
     </tr>
    </table>
   </td>
  </tr>
  <tr bgcolor="white">
   <td> </td>
   <td width="90%">
    <asp:Button ID="btnCommit" runat="server" Text="提交" SkinID="btnSkin" Width="100px" OnClick="btnCommit_Click" /> <asp:Label ID="lbMessage" runat="server" CssClass="Text" ForeColor="Red"></asp:Label>
   </td>
  </tr>
</table>
这里使用了一个javascript，来动态生成多个上传文件框，注意这里用了一个DHTML的函数insertAdjacentHTML，用法如下

加html内容(insertAdjacentHTML和insertAdjacentText)
    dhtml提供了两个方法来进行添加，insertAdjacentHTML和insertAdjacentText
insertAdjacentHTML方法：在指定的地方插入html标签语句。
    原型：insertAdjacentHTML(swhere,stext)
    参数：
    swhere:指定插入html标签语句的地方，有四种值可以用：
              1.beforeBegin:插入到标签开始前
              2.afterBegin:插入到标签开始标记后
              3.beforeEnd:插入到标签结束标记前
              4.afterEnd:插入到标签结束标记后
              stext:要插入的内容
      例：var sHTML="<input type=button onclick=" +     "go2()" + " value='Click Me'><BR>"
      var sScript='<SCRIPT DEFER>'
      sScript = sScript +     'function go2(){ alert("Hello from inserted script.") }'
      sScript = sScript + '</script' + '>';
      ScriptDiv.insertAdjacentHTML("afterBegin",sHTML + sScript);
      在html正文中加入一行：
    <DIV ID="ScriptDiv"></Div>
     最终变成：
    <DIV ID="ScriptDiv">
       <input type=button onclick=go2() value='Click Me'><BR>
       <SCRIPT DEFER>
         function go2(){alert("Hello from inserted sctipt.")}'
       </script>
     </DIV>
     insertAdjacentText方法与insertAdjacentHTML方法类似，只不过只能插入纯文本，参数相同

接下来就可以用FOR循环去处理了
protected void btnCommit_Click(object sender,EventArgs e)
{
  if(ddlCategory.SelectedIndex <= 0) return;
  ///获取上载文件的列表
  HttpFileCollection fileList = HttpContext.Current.Request.Files;
  if(fileList == null) return;
  Album album = new Album();
  try
  {   ///上载文件列表中的每一个文件
   for(int i = 0; i < fileList.Count; i++)
   {   ///获取当前上载的文件
    HttpPostedFile postedFile = fileList[i];
    if(postedFile == null) continue;
    ///获取上载文件的文件名称
    string fileName = Path.GetFileNameWithoutExtension(postedFile.FileName);
    string extension = Path.GetExtension(postedFile.FileName);
    if(string.IsNullOrEmpty(extension) == true) continue;
    ///判断文件是否合法
    bool isAllow = false;
    foreach(string ext in AjaxAlbumSystem.ALLOWPHOTOFILELIST)
    {
     if(ext == extension.ToLower())
     {
      isAllow = true;
      break;
     }
    }
    if(isAllow == false) continue;
    ///获取基于时间的文件名称
    string timeFilename = AjaxAlbumSystem.CreateDateTimeString();
    ///获取保存在数据库中的URL
    string url = "Photoes/" + timeFilename + extension;
    ///获取全路径
    string fullPath = Server.MapPath(url);
    ///上载文件
    postedFile.SaveAs(fullPath);
    ///添加文件到数据库中
    album.AddPhoto(fileName,url,postedFile.ContentType,postedFile.ContentLength,
     Int32.Parse(ddlCategory.SelectedValue));
   }
  }
  catch(Exception ex)
  {   ///显示上载文件的操作失败消息
   lbMessage.Text = "上载文件错误，错误原因为：" + ex.Message;
   return;
  }