Multiple Image Upload Using File Upload In ASP.NET C#

Ajit Srivastava
Apr 26, 2021

34k
0
4
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

SourceCode.zip

Introduction

This article helps you to know and implement Single or multiple image upload in asp.net c# using Fileupload control.

Below are some simple steps to upload multiple images in a single upload using file upload in asp.net c#,

Step 1

Create a new Asp.net Web Application using visual studio IDE.

Step 2

Write below code in designer page(.aspx).

You need to add reference of Ajaxtoolkit in order to use updatepanel control as highlighted below in yellow,

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultiplePhotoupload.aspx.cs" Inherits="MultiplePhotoupload" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h5 class="text-capitalize px-3">Image Upload</h5>
<asp:ScriptManager ID="SCPTMGR" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdimageUpload" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileuploadImage" multiple="multiple" runat="server" />
<asp:Button ID="btnSave" Text="Save Image" runat="server" OnClick="btnSave_Click"/>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSave"/>
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

Control and Reference Explaination

Here I am using ajax control like Scriptmanger, Updatepanel in order to provide Async communication between client and server. Update Panel basically used when you want only a specific part of the page to get refresh instead of the complete page so you just need to put control code inside the update panel control.

In order to use ajax control, we need to add a reference of Ajaxtoolkit in your visual studio IDE as below. Once add a reference to the ajax tool kit the DLL will get added to the bin folder as below.

Multiple Image Upload Using File Upload In ASP.NET C#

Step 3

Add below namespce and piece of code in .aspx.cs file,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web;
using System.IO;
public partial class MultiplePhotoupload: System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {}
protected void btnSave_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("~/image/banner/" + Path.GetFileName(_HttpPostedFile.FileName)));
}
}
}