Introduction:
Create an example to Upload Images using Fileupload Control in asp.net,The ASP.Net FileUpload control is a new web server control in
ASP.Net 2.0 framework that provides the advanced functionality to the users to upload
a file from their system to the online web server. It renders using HTML input
type file control that appears as combination
of two controls such as TextBox
control and a Button control. The
TextBox control sends the path of the file selected from the user's computer to
the server, whereas button control provides the functionality to open a
file-navigation dialog box. Users can navigate between the directories and
files available on their system and select a file that they want to upload to
the web server. The security feature of FileUpload control does not allow you
to specify the file path dynamically and the users are also not allowed to
type-in the file path in the textbox field available with FileUpload control.
Users have to browse the file using file-navigation dialog box to select it for
uploading.
Prerequisites for this tutorial:
Prerequisites for this tutorial:
- Visual studio(IDE)-2012 ultimate/professional/2013 express/any/2015
- Net FrameWork 4.0
Application:
Step1: Open Visual studio go toàfileàopen new website or project and clickàchoose language as c#, select web and click onasp.net empty website (or)
Applicationàsave the file in your required directory at below
paneàclick ok.
Step2: Right click on project name in solution
exploreràselect add
clickàselect new item, a new template
will open àchoose web form named as FileUpload in right pane and click ok.
Step3: To add FileUpload on page, go to
toolboxàfind FileUpload
à drag and drop on to
designer page or source page.
Step4: Go to code behind file ... (FileUpload.aspx.cs)
1. FileUpload.aspx
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>File
Upload </title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,300italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css' />
<style>
body
{
font-family:
'Open Sans', sans-serif;
}
.content
{
width:
65%;
margin:
0 auto;
margin-top:
75px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<b>Upload
File:</b>
<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<br/>
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
<br />
<asp:Label ID="lblStatus" runat="server" />
</div>
</form>
</body>
</html>
Output:
DesignView:
DesignView:
using
System;
using
System.Collections.Generic;
using
System.IO;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
namespace
gofaq
{
public partial class fileupload
: System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs
e)
{
}
protected void
btnUpload_Click(object sender, EventArgs
e)
{
if
(FileUpload1.HasFile)
{
try
{
string
fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
string
serverFolder = Server.MapPath("Upload\\");
if
(!Directory.Exists(serverFolder))
Directory.CreateDirectory(serverFolder);
string
serverFilePath = serverFolder + fileName;
FileUpload1.SaveAs(serverFilePath);
lblStatus.Text = "<b
style='color:green'>File has been uploaded successfully!!!</b>";
}
catch
(Exception)
{
lblStatus.Text = "<b
style='color:red'>Some problem occurred while uploading the file. Please try
after some time.</b>";
}
}
else
{
lblStatus.Text = "<b
style='color:red'>Please select a file to upload!!!</b>";
}
}
}
}
}
//place this below
code in btnUpload_click Event to Check File type And Max.Size(or) Length
if
(FileUpload1.HasFile)
{
try
{
string
fileType = FileUpload1.PostedFile.ContentType;
if
(fileType == "image/jpeg" ||
fileType == "image/jpg"
||
fileType == "image/gif"
||
fileType == "image/png"
||
fileType == "image/bmp")
{
int
fileSize = FileUpload1.PostedFile.ContentLength;
if
(fileSize <= 50) //Max Size: 2MB
{
string
fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
string
serverFolder = Server.MapPath("Upload\\");
if
(!Directory.Exists(serverFolder))
Directory.CreateDirectory(serverFolder);
string
serverFilePath = serverFolder + fileName;
FileUpload1.SaveAs(serverFilePath);
lblStatus.Text = "<b
style='color:green'>File has been uploaded successfully!!!</b>";
}
else
{
lblStatus.Text = "<b
style='color:red'>Please select a file of max size 50kb
only.</b>";
}
}
else
{
lblStatus.Text = "<b
style='color:red'>Please select an image file only
(Ex:*.jpg/*.jpeg/*.gif/*.png/*.bmp)</b>";
}
}
catch
(Exception)
{
lblStatus.Text = "<b
style='color:red'>Some problem occurred while uploading the file. Please try
after some time.</b>";
}
}
else
{
lblStatus.Text = "<b
style='color:red'>Please select a file to upload!!!</b>";
}
Output:
Press CTRL+F5
or F5 to run the page on server .
1.click on
upload button with out selecting any file , it validates the file upload
control.
2.click on choose
file button it open your window’s Explorer and select appropriate image
3.click on
upload button it saves the file into
appropriate folder in project
directory
4.To restrict
the Type of file and Size,see the output below.Here ,I have uploaded a file
with an extension of .txt
5. It alerts a
message as like below
6. I have
uploaded a file which is morethan 50kb,see what will happen
6. it alerts a
message "please select a file of max size 50kb only"
...for more information about previous tutorial please visit this link ASP.Net Tutorials and Thank you for visiting my blog ,don't forget to comment on post and if you want daily updates Just follow me in Google Plus.
