locked
Jquery UI progress bar not working in IE6-IE9 RRS feed

  • Question

  • User1333432024 posted

    Hi I have been following an example to try and get a progress bar to work in ASP.NET here is the head code:

    <script src="jquery-2.0.0.js"></script>
    <script src="jquery-ui.js"></script>
    <link type="text/css" href="jquery-ui.css" rel="stylesheet" />
    <style>
    .progressbar {
    width:300px;
    height:21px;
    }
    .progressbarlabel {
    width:300px;
    height:21px;
    ;
    text-align:center;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
    font-size:small;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#Button1").click(function (evt) {
    if (window.XMLHttpRequest) {
    //Firefox, Opera, IE7, and other browsers will use the native object
    var xhr = new XMLHttpRequest();
    } else {
    //IE 5 and 6 will use the ActiveX control
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    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>

    Here is the body:

    <form id="form1" 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" class="btn btn-primary" />
    <br />
    <br />
    <asp:Button ID="Button1" runat="server" Text="Upload" onClick="uploadFile" class="btn btn-primary" />
    <br />
    <br />
    <div id="progressbar" class="progressbar">
    <div id="progresslabel" class="progressbarlabel"></div>
    </div>
    </form>

    It shows the progress bars for IE10, 11, chrome, firefox etc but when tested in previous IE browsers it just shows the script once the upload button is clicked.

    Any ideas what it could be?

    Thursday, August 18, 2016 10:48 AM

Answers

  • User-474980206 posted
    Sorry, didn't notice the Xhr progress event code. This is not supported before IE10. Actually you can not use Xhr to upload a file with IE 6-9, only a form post will work. To get Ajax like behavior with 6-9, you post to an iframe, and return a script that calls back to the parent frame. There are file upload libraries for this.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 20, 2016 1:15 AM

All replies

  • User-474980206 posted

    jQuery 2.0 only supports IE 9+
    jQuery-UI 1.12 supports IE 8+

    if you need support of < IE9, then you need stick with the jQuery 1.x version and jQuery-ui 1.9.2 (1.10 dropped IE 6.0). jQuery-ui 1.9.2 used jQuery 1.6 (1.8.3 should work), but may work with a later 1.9+ version if the migrate module is included.  

    so if you really need IE < 9, your best bet is:

      jQuery 1.8.3
      jQuery-ui 1.9.2

      you might get jQuery 1.12.4 with migrate to work.  

    if you can do IE8+ then you want:

      jQuery 1.12.4
      jQuery-UI 1.12

    if you can do IE9+ then you want:

      jQuery 2.2.4
      jQuery-UI 1.12

      

    Friday, August 19, 2016 2:01 AM
  • User1333432024 posted

    Hey Bruce, 

    I changed the file to 
    jQuery 1.8.3
    jQuery-ui 1.9.2

    but still doesn't work in IE6, once the button is clicked it just uploads the file without displaying any progress bar.

    Friday, August 19, 2016 9:51 AM
  • User-474980206 posted
    Sorry, didn't notice the Xhr progress event code. This is not supported before IE10. Actually you can not use Xhr to upload a file with IE 6-9, only a form post will work. To get Ajax like behavior with 6-9, you post to an iframe, and return a script that calls back to the parent frame. There are file upload libraries for this.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 20, 2016 1:15 AM