Hi,
I'm trying to implement a dynamic progress bar that shows real progress of image files uploaded from my webform. The follow test code that I try is showing me the % (percentage) of the uploading image, and the file is uploaded ok, but any progress bar is displayed.
How can I modify this code so that a real on time upload progress bar is displayed while the file uploads? (I am totally newbie in jQuery) The example test used is copied from here:
If somebody knows a better complete example code (cleaner and more efficient code) please let me know.
Thanks
Head section:
Body section:
UploadHandler.ashx file:
I'm trying to implement a dynamic progress bar that shows real progress of image files uploaded from my webform. The follow test code that I try is showing me the % (percentage) of the uploading image, and the file is uploaded ok, but any progress bar is displayed.
How can I modify this code so that a real on time upload progress bar is displayed while the file uploads? (I am totally newbie in jQuery) The example test used is copied from here:
If somebody knows a better complete example code (cleaner and more efficient code) please let me know.
Thanks
Head section:
Code:
<head runat="server">
<meta charset="utf-8" />
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/jquery-ui-1.10.4.js"></script>
<link href="jquery-ui.css" rel="stylesheet" />
<title></title>
<style type="text/css">
.progressbar {
width:300px;
height:21px;
}
.progressbarlabel {
width:300px;
height:21px;
position:absolute;
text-align:center;
font-size:small;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function (evt) {
var xhr = new XMLHttpRequest();
var data = new FormData();
var files = $("#FileUpload1").get(0).files;
for (var i = 0; i < files.length; i++) {
data.append(files[i].name, files[i]);
}
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var progress = Math.round(evt.loaded * 100 / evt.total);
$("#progressbar").progressbar("value", progress);
}
}, false);
xhr.open("POST", "UploadHandler.ashx");
xhr.send(data);
$("#progressbar").progressbar({
max: 100,
change: function (evt, ui) {
$("#progresslabel").text($("#progressbar").progressbar("value") + "%");
},
complete: function (evt, ui) {
$("#progresslabel").text("File upload successful!");
}
});
evt.preventDefault();
});
});
</script>
</head>Body section:
Code:
<body>
<form id="form2" runat="server">
<asp:Label ID="Label1" runat="server" Text="Select File(s) to Upload :"></asp:Label>
<br />
<br />
<asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Upload" />
<br />
<br />
<div id="progressbar" class="progressbar">
<div id="progresslabel" class="progressbarlabel"></div>
</div>
</form>
</body>UploadHandler.ashx file:
Code:
<%@ WebHandler Language="VB" Class="GenericHandler1" %>
Imports System
Imports System.Web
Public Class GenericHandler1 : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
Dim files As HttpFileCollection = context.Request.Files
For Each key As String In files
Dim file As HttpPostedFile = context.Request.Files(key)
Dim fileName As String = file.FileName
fileName = context.Server.MapPath("~/images/jquery/" + fileName)
file.SaveAs(fileName)
Next
context.Response.ContentType = "text/plain"
context.Response.Write("File(s) uploaded successfully!")
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class