Introduction: In this article today I will explain
how we can preview the image after uploading in asp.net.
Description:
In the previous article I have explained Validation for minimum and maximum price using Jquery, Show Gridview row detail in Tooltip on mousehover using Jquery in asp.net;Validate Listbox using Require filed validator control in asp.net,Server side validation in MVC Razor using data annotation,Like linq query example and bind gridview,Create a dynamic Slider in asp.net, and Validate Dropdownlist using Require filed validator control in asp.net.
Add a webform
to project and design the page as shown below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<center>
<fieldset style="width:25%">
<legend>Uplaod and Preview the Image</legend>
<table>
<tr><td>Upload Image:</td><td><asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:Label ID="lblmessage"
runat="server"></asp:Label></td></tr>
<tr><td></td><td> <asp:Button ID="btnupload" runat="server" Text="Upload Image"
onclick="btnupload_Click"
/></td></tr>
</table>
<asp:Image ID="imgpreview"
runat="server"
width="350px"
Height="300px"/>
</fieldset>
</center>
</div>
</form>
</body>
</html>
On button
click write the below given code (C#):
protected void
btnupload_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
string path = Server.MapPath("~/Images/") + FileUpload1.FileName;
FileUpload1.SaveAs(path);
imgpreview.ImageUrl = "~/Images/"
+ FileUpload1.FileName;
}
else
{
lblmessage.Text = "Upload image";
imgpreview.ImageUrl = "";
}
}
In VB:
Protected Sub
btnupload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles
btnupload.Click
Dim path As String
If FileUpload1.HasFile Then
path = Server.MapPath("~/images/")
+ FileUpload1.FileName
FileUpload1.SaveAs(path)
imgpreview.ImageUrl = "~/images/"
+ FileUpload1.FileName
Else
lblmessage.Text = "Upload Image"
imgpreview.ImageUrl = ""
End If
End Sub
Build and
run the project.
Output:
Is this article helpful for you?
.png)
good !!! thnaks for all, please more more more :)!! thanks!!!
ReplyDelete