Upload nhiều file trong ASP.NET

8/29/11

Upload nhiều file trong ASP.NET

Thông qua bài viết này bạn có thể học được cách tạo ra chức năng JavaScript Upload nhiều file ảnh cùng lúc.
JavaScript: Đây là chức năng tải nhiều ảnh lên cùng lúc
<script language="javascript" type="text/javascript">
function AddMoreImages() {
   if (!document.getElementById && !document.createElement)
   return false;
   var fileUploadarea = document.getElementById("fileUploadarea");
   if (!fileUploadarea)
   return false;
   var newLine = document.createElement("br");
   fileUploadarea.appendChild(newLine);
   var newFile = document.createElement("input");
   newFile.type = "file";
   newFile.setAttribute("class", "fileUpload");
   if (!AddMoreImages.lastAssignedId)
   AddMoreImages.lastAssignedId = 100;
   newFile.setAttribute("id", "FileUpload" + AddMoreImages.lastAssignedId);
   newFile.setAttribute("name", "FileUpload" + AddMoreImages.lastAssignedId);
   var div = document.createElement("div");
   div.appendChild(newFile);
   div.setAttribute("id", "div" + AddMoreImages.lastAssignedId);
   fileUploadarea.appendChild(div);
   AddMoreImages.lastAssignedId++;
   }
</script>
Example: Uploadmultiplefiles.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Uploadmultiplefiles.aspx.cs" Inherits="Uploadmultiplefiles" %>
<!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 id="Head1" runat="server">
   <title>Multiple Image upload using JavaScript</title>
   <script language="javascript" type="text/javascript">
   function AddMoreImages() {

if (!document.getElementById && !document.createElement)
   return false;
   var fileUploadarea = document.getElementById("fileUploadarea");
   if (!fileUploadarea)
   return false;
   var newLine = document.createElement("br");
   fileUploadarea.appendChild(newLine);
   var newFile = document.createElement("input");
   newFile.type = "file";
   newFile.setAttribute("class", "fileUpload");
   if (!AddMoreImages.lastAssignedId)
   AddMoreImages.lastAssignedId = 100;
   newFile.setAttribute("id", "FileUpload" + AddMoreImages.lastAssignedId);
   newFile.setAttribute("name", "FileUpload" + AddMoreImages.lastAssignedId);
   var div = document.createElement("div");
   div.appendChild(newFile);
   div.setAttribute("id", "div" + AddMoreImages.lastAssignedId);
   fileUploadarea.appendChild(div);
   AddMoreImages.lastAssignedId++;
   }
   </script>
</head>
<body>
   <form id="form1" runat="server">
   <div>
   <div id="fileUploadarea">
   <asp:FileUpload ID="FileUpload1" runat="server" BorderStyle="Solid" BorderColor="Gray" /><br />
   </div>
    
<input style="display: block;" id="btnAddMoreImages" type="button" value="Add more images" onclick="AddMoreImages();" />
   <asp:Button ID="ButtonUpload" runat="server" OnClick="ButtonUpload_Click" Text="Upload" />
   </div>
   </form>
</body>
</html>

Uploadmultiplefiles.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Uploadmultiplefiles : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {
   }

   protected void ButtonUpload_Click(object sender, EventArgs e)
   {
   HttpFileCollection httpFileCollection = Request.Files;
   for (int i = 0; i < httpFileCollection.Count; i++)
   {
   HttpPostedFile httpPostedFile = httpFileCollection[i];
   if (httpPostedFile.ContentLength > 0)
   {
   httpPostedFile.SaveAs(Server.MapPath("~/UploadedImages/") + System.IO.Path.GetFileName(httpPostedFile.FileName));
   }
   }
   }
}
Lưu ý phải tạo thư mục "UploadedImages".

Nguồn DNGAZ.com- Diễn Đàn Đà Nẵng