In this example I am explain that how to upload multiple files by dynamically adding FileUpload controls using JavaScript. In web application or any other application we generally need to upload or browse multiple files at a time same like Gmail facility.due to this reason in this example we will dynamically generate FileUpload Control to browse number of files we need to upload on server in asp.net with c#.
Here
I will explain how one can create a multiple file uploading controls in a very
simple manner and very less amount of code using javascript. To do this Add
FileUpload Controls dynamically using JavaScript and Remove FileUpload Controls dynamically using
JavaScript without any postback.
I
also put the validation for Dynamically generated File upload like Empty file
check,Maximum size of fileupload and type or extention of the file.
Adding
and Removing FileUpload Controls using JavaScript
As
you can see I have added a HTML Link button to add new FileUpload Controls and provide
Remove html linkbutton to remove the File Upload.
Main
point to note that is you have to set enctype="multipart/form-data to the form in order
to allow the multiple uploading of files through dynamic FileUpload controls.
How to Send Forgot Password to user Email Send Forgot Password to user email
Rotate the Ads witout Refreshing the webpage Rotate the Advertisement in Asp.Net
Export Gridview Data to PDF file Export Grid data to PDF File
Rotate the Ads witout Refreshing the webpage Rotate the Advertisement in Asp.Net
Export Gridview Data to PDF file Export Grid data to PDF File
multiplefileupload.aspx:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="multiplefileupload.aspx.cs" Inherits="multiplefileupload" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Multiple Files Upload same like as Gmail</title>
<script type="text/javascript">
var cnt = 0;
function AddFileUpload() {
var div = document.createElement('DIV');
div.innerHTML = '<input id="file' + cnt + '" name = "file' + cnt +
'" type="file" />' +
'<a href="#" id="lnl' + cnt + '" onclick =
"DeleteFileupload(this)" />Remove</a>';
document.getElementById("FileUploadGroup").appendChild(div);
cnt++;
}
function DeleteFileupload(div) {
document.getElementById("FileUploadGroup").removeChild(div.parentNode);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblErrormsg" runat="server" Font-Bold="true" ForeColor="Red"> </asp:Label><br />
<a href="#" onclick="AddFileUpload()">Click to Attech More Files</a><br />
<br />
<br />
<div id="FileUploadGroup">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
<br />
<br />
</div>
</form>
</body>
</html>
multiplefileupload.aspx.cs:-
using
System;
using
System.Web;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.HtmlControls;
using
System.Data.SqlClient;
using
System.Data;
using
System.Text;
using
System.IO;
//Uploading Multiple Files by Dynamically generated
FileUpload Control in c#.Net
public partial class multiplefileupload : System.Web.UI.Page
{
string error;
protected void Page_Load(object
sender, EventArgs e)
{
if (IsPostBack)
{
error = "";
}
}
protected void btnUpload_Click(object sender, EventArgs e)
{
string FileName = "";
try
{ // Get the HttpFileCollection
HttpFileCollection hfc = Request.Files;
for (int i = 0; i < hfc.Count; i++)
{
HttpPostedFile hpf = hfc[i];
FileName = System.IO.Path.GetFileName(hpf.FileName);
if (hpf.ContentLength > 0)
{
if (hpf.ContentLength < 307200) //Size of File 3MB
{
string Ext = System.IO.Path.GetExtension(hpf.FileName);
if ((Ext == ".txt") || (Ext == ".doc") || (Ext == ".docx") || (Ext == ".jpg") || (Ext == ".jpeg") || (Ext == ".xls") || (Ext == ".xlsx"))
{
hpf.SaveAs(Server.MapPath("~/Files/") + "doc[" + (i + 1).ToString() + "]@" + System.DateTime.Now.Date.Date.ToString("dd-MM-yy") + Ext);
error = "'" + FileName.ToString() + "'" + " Uploaded Successfully..." + "";
}
else
{
error = "'" + FileName.ToString() + "'" + " Failed :" + "'" + Ext.ToString() + "'" + " Extension not supported... " + "";
}
}
else
{
error = "'" + FileName.ToString() + "'" + " Failed : " + " file length should
not exceed 3MB... " + "";
}
}
else
{
error = "'" + FileName.ToString() + "'" + " Failed : " + " File is Empty...
" + "";
}
lblErrormsg.Text = error +
lblErrormsg.Text;
}
}
catch (Exception ex)
{
Response.Write(ex.Message);
}
}
}
0 comments:
Post a Comment