Wednesday, January 9, 2008

How To Upload Multiple Files 




<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultipleUpload.aspx.cs" Inherits="MultipleUpload" %>

<!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 runat="server">
    <title></title>

    <script type="text/javascript">
        //This function Creates the clone of the file upload control to upload images when 
        //clicked on AddAnother link.The function first get the reference of the file upload 
        //control "myElement1" added in HTML and the refernce of the td where we want to add 
        //the new control and then creates the clone of this referenced file upload.
        //The vale attribute of this newly created control is set to null as it contains 
        //the value of previously entered.The unique id and name is assigned to it and then 
        //added in the TD. Before inserting the BR tag is also inserted
        //so the the control should be added in next line.
        function addImageFile() {
            var fileInput = document.getElementById('tdFileInputs');
            var fileInput = document.getElementById("myElement1");
            var newFileInput = fileInput.cloneNode(true);
            newFileInput.value = null;
            newFileInput.id += 'A'; // A unique id
            newFileInput.name = newFileInput.id;
            if (document.all) {
                var br = document.createElement("<br>");
                tdFileInputs.appendChild(br);
            }
            tdFileInputs.appendChild(newFileInput);
            return false;
        }
   
    </script>

</head>
<body>
    <form id="form1" runat="server" enctype="multipart/form-data">
    <div>
        <table>
            <tr>
                <td id="tdFileInputs">
                    <input type="file" id="myElement1" name="myElement1" />
                </td>
            </tr>
        </table>
        <a href="#" onclick="addImageFile();">Add</a>
        <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

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

    }
    protected void btnSave_Click(object sender, EventArgs e)
    {
        string baseImageLocation = Server.MapPath("UserImages\\");
        HttpFileCollection files = Request.Files;
        for (int i = 0; i < files.Count; i++)
        {
            HttpPostedFile file = files[i];
            string fileExt = Path.GetExtension(file.FileName).ToLower();
            string fileName = Path.GetFileName(file.FileName);
            if (fileName != "")
            {
                if (fileExt == ".jpg" || fileExt == ".gif")
                    file.SaveAs(baseImageLocation + fileName);

            }
        }
    }
}

Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)