Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Progress bar is not displayed in file upload process

Status
Not open for further replies.

cesaremp

Programmer
Aug 21, 2013
5
ES
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:
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
 

OK. Solved. I should've seen before. If all the code seemed right (which I didn’t know precisely because I am new to jQuery) the only problem should be configuration or js/css files of jQuery library in my project. In that case was the link to jquery-ui.css style sheet, which didn’t follow the right path.

I had this wrong link path:

<link href="jquery-ui.css" rel="stylesheet" />

And the correct one is this:

<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />

Best Regards
 
I just read in jQuery oficial web page that it is better using jQuery 1.x than jQuery 2.x, because jQuery 2.x does not support Internet Explorer 6, 7, or 8 (IE 8 is still relatively common). See original recommendation here
Do you know if I could use some version of jQuery 1.x so that it suports Internet Explorer 6,7, or 8 along with my jQuery UI progressbar widget? If so, which version should I use and from where could I download it?

Thanks
 
Since I need a file upload with asynchronous feedback myself, I also came across this solution among some others. The jQuery versions ranged from 1.3 upward, so that should not be a problem.
Here's a link to a solution with Uploadify and jquery-1.3.2-min including a download link for jquery-1.3.2-min:

Good luck!
MakeItSo

“Knowledge is power. Information is liberating. Education is the premise of progress, in every society, in every family.” (Kofi Annan)
Oppose SOPA, PIPA, ACTA; measures to curb freedom of information under whatever name whatsoever.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top