首頁 > 開發者 > ASP

asp.net 2.0中允許一次上傳多個檔案的設計

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
在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 id="form1" runat="server" method="post" enctype="multipart/form-data">
    <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 id="FileList"><input type="file" disabled="disabled" size="50" name="File" class="Button" /></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>&nbsp;</td>
   <td width="90%">
    <asp:Button ID="btnCommit" runat="server" Text="提交" SkinID="btnSkin" Width="100px" OnClick="btnCommit_Click" />&nbsp;<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;
  }

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
ASP學習總結：錯誤碼
反爬蟲：利用ASP.NET MVC的Filter和緩衝（入坑出坑）
ASP.NET Core 2.0利用MassTransit整合RabbitMQ
實戰中的asp.net core結合Consul叢集&Docker實現服務治理
asp DateDiff實現文字在特定時間後消失
設定和讀取ASP.Net全域變數的方法

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More