Source code :
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb"
Inherits="Default2" %>
<!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>Untitled Page</title>
<link href="styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ToolkitScriptManager1" />
<script type="text/javascript" language="javascript">
function fillCell(row, cellNumber, text) {
var cell = row.insertCell(cellNumber);
cell.innerHTML = text;
cell.style.borderBottom = cell.style.borderRight = "solid 1px #aaaaff";
}
function addToClientTable(name, text,res) {
var table = document.getElementById("<%= clientSide.ClientID %>");
var row = table.insertRow(0);
fillCell(row, 0, name);
fillCell(row, 1, text);
fillCell(row, 2, res);
}
function uploadError(sender, args) {
addToClientTable(args.get_fileName(), "<span style='color:red;'>"
+ args.get_errorMessage() + "</span>","<img src='images/x.png' alt=''/>");
}
function uploadComplete(sender, args) {
var contentType = args.get_contentType();
var text = args.get_length() + " bytes";
if (contentType == "image/pjpeg") {
addToClientTable(args.get_fileName(), text + " Image uploaded successfully!"
, "<img src='images/check.png' alt=''/>");
}
else {
addToClientTable(args.get_fileName(), "<span style='color:red;'>"
+ "Access is denied! Please select image with jpeg extension!" + "</span>", "<img src='images/x.png' alt=''/>");
}
}
</script>
<div>
</div>
<div>
<div style="background-color: #E9E9E9" >
<div >Upload your Image</div>
Click '<i>Select File</i>' for asynchronous uploading.
<br /><br />
<div>
<ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload2" runat="server" OnClientUploadError="uploadError"
CompleteBackColor="#E4E4E4" ThrobberID="myThrobber" UploaderStyle="Modern"
UploadingBackColor="#CCFFFF" Width="400px" OnClientUploadComplete="uploadComplete" />
</div>
<div><strong>Upload Result :</strong></div>
<table><tr><td> <table style="border-collapse: collapse; border-left: solid 1px #aaaaff; border-top: solid
1px #aaaaff;" runat="server" cellpadding="3" id="clientSide" />
</td><td><asp:Label runat="server" ID="myThrobber" style="display:none" >
<img align="absmiddle" alt="" src="uploading.gif"
/></asp:Label></td></tr></table>
</div>
</form>
</body>
</html>
and in code behind:
Protected Sub AsyncFileUpload2_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) Handles AsyncFileUpload2.UploadedComplete
Dim extension As String = AsyncFileUpload2.ContentType
If extension = "image/pjpeg" Then
Dim savePath As String = HttpContext.Current.Server.MapPath("~/images/" & Path.GetFileName(e.filename))
AsyncFileUpload2.SaveAs(savePath)
Else
Exit Sub
End If
End Sub
We can upload image in our web application using input file html control in VB.NET. By assigning this control to runat=”server”, we can access its attribute in code behind.
How to use AJAX AsyncFileUpload Control for uploading image and validate if the file is jpeg extension.