After lot of RND i got the perfect solution on this ..show progress bar depends upon file size.....
below is the code
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
var file = _("file1").files[0];
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "FileUploadHandler.ashx");
ajax.send(formdata);
}
function progressHandler(event) {
_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
} function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="file1" runat="server" /><br />
<br />
<input type="button" value="Upload File" onclick="uploadFile()" />
<br />
<br />
<progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
<h3 id="status">
</h3>
<p id="loaded_n_total">
</p>
</div>
</form>
</body>
</html>
and FileUploadHandler.ashx.vb code...
Code
Imports System.Web
Imports System.Web.Services
Public Class FileUploadHandler
Implements System.Web.IHttpHandler
Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
If context.Request.Files.Count > 0 Then
Dim files As HttpFileCollection = context.Request.Files
For i As Integer = 0 To files.Count - 1
Dim file As HttpPostedFile = files(i)
Dim fname As String = context.Server.MapPath((ConfigurationManager.AppSettings("CONST_SAVE_UPLOAD_FILE_NAME")) + file.FileName)
file.SaveAs(fname)
Next
context.Response.ContentType = "text/plain"
context.Response.Write("File Uploaded Successfully!")
End If
End Sub
ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class
