Scroll To Top
Reader Level:
Article
ASP.NET Programming

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'>