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