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'>
Up Next
    Ebook Download
    View all
    Learn
    View all