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