Reader Level:
Article

JavaScript function: To upload multiple images

By Purushottam Rathore on Aug 06, 2010
Through this article you will learn how to create JavaScript function to upload multiple images.

Through this article you will learn how to create JavaScript function to upload multiple images.


JavaScript: This is a JavaScript function to upload multiple image at a time.

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

Output: By default you can upload single image file.

1.png

Figure 1:


If you want to upload more then one images you  will need to click on 'Add more images' as follows:

2.png
Figure 2:

Now browse the images and click on upload button. But keep in mind to create a folder as '
UploadedImages' in your application root directory.

erver'>
Purushottam Rathore

I am working as a Software Developer and has 6 years of experience on Microsoft Technology and having a Master Degree in Computer Application. I really like to work in the .NET platform. and working with ASP.NET 2.0/3.5/... Read more

COMMENT USING