JavaScript function: To upload multiple images

Purushottam Rathore
14y
23.2k
0
0

Article

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.

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.

Figure 1:

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

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

ASP.NET MVC 5 Recipes: A Practical Solution

Read by 9.3k people

Download Now!

Learn

View all