description:
This Article is useful to all beginners as well as who suffering to get uploading file size in client side using java script
So,here just i am using RAD ASYNCHRONOUS Upload control to validate the file size .
here we are not writing single word in code behind ..everything will work only from design page itself
The page will have following content :
This namespace for ""Telerik"" to access the telerik controls in aspx page :
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
RadScriptManager is a control that replaces the script manager available in the Microsoft Ajax Extensions suite. On this radscriptmanager the three script references is need to get added to get the filesize while file uploading in progress.
Note : To get the additional features in javascript we need to add the above mentioned three references in radscriptmanager.
RadScriptManager is a control that replaces the script manager available in the Microsoft Ajax Extensions suite. On this radscriptmanager the three script references is need to get added to get the filesize while file uploading in progress.
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
Note : To get the additional features in javascript we need to add the above mentioned three references in radscriptmanager.
RadCodeBlock should be used when you have server code blocks placed within the markup (most often some JavaScript functions accessing server controls).RadCodeBlock is used to isolate the code block preventing the error from appearing.
For radasynchronous upload we have given the clientside events :
1)OnClientProgressUpdating.
2)OnClientFileUploaded.
OnClientProgressUpdating we will get the Uploading file size. This obtained file size will be maintained in the global declared variable. After on OnClientFileUploaded event we will check whether the file size limit is exceeded or not. If it is exceeded the maximum limit(Here for the convenience i have taken 2MB as maximum limit you can change it as per your requirement) we will remove the file.
Note : The maximum file size limit will be checked in the form of bytes(Here 2MB=2097152bytes).
.aspx page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileSizeRadUpload.aspx.cs"
Inherits="RadUpload.FileSizeRadUpload" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
var UploadedFileSize = 0;
function OnProgressUpdating(sender, args) {
UploadedFileSize = args.get_data().fileSize;
}
function OnFileUploaded(sender, args) {
alert(UploadedFileSize);
if(UploadedFileSize > 2097152)
var numberOfFiles = sender._uploadedFiles.length;
sender.deleteFileInputAt(numberOfFiles - 1);
}
</script>
</telerik:RadCodeBlock>
<div>
<telerik:RadAsyncUpload ID="RadAsyncUpload1" OnClientProgressUpdating="OnProgressUpdating"
OnClientFileUploaded="OnFileUploaded" runat="server" EnableFileInputSkinning="false">
</telerik:RadAsyncUpload>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment