jquery Fortschrittsbalken funktioniert nicht

Ich habe Jquery Fortschrittsbalken verwendet, aber es funktioniert nicht zeigen nur [Objekt Objekt]% in der Fortschrittsleiste Ich war mit Jquery Liabry und CSS, aber es ist nicht richtig auf meiner Seite angezeigt. wie kann es behoben werden, ich versuche, weitere jquery plugins hinzuzufügen.jquery Fortschrittsbalken funktioniert nicht

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 

    <link type="text/css" href="CSS/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="Scripts/ui.core.js"></script> 
    <script type="text/javascript" src="Scripts/ui.progressbar.js"></script> 
    <script src="Scripts/jquery-ui.js"></script> 
    <script type="text/javascript" src="/js/jquery/ui/jquery.ui.progressbar.min.js"></script> 
    <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", "Handler.ashx"); 
       xhr.send(data); 

       $("#progressbar").progressbar({ 
        max: 100, 
        change: function (evt, ui) { 

         $("#progresslabel").text($("#progressbar").progressbar("value") + "%").toString(); 
        }, 
        complete: function (evt, ui) { 
         $("#progresslabel").text("File upload successful!"); 
        } 
       }); 
       evt.preventDefault(); 
      }); 
     }); 

    </script> 
    <style type="text/css"> 
     .progressbar { 
      width: 300px; 
      height: 21px; 
     } 

     .progressbarlabel { 
      width: 300px; 
      height: 21px; 
      position: absolute; 
      text-align: center; 
      font-size: small; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <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> 
     </div> 
    </form> 
</body> 
</html>

Quelle

2017-01-10 Santosh Kumar

Hallo Herr nach dem updation ist es auch nicht eine andere Lösung arbeiten mir bitte geben –

Sie, dass 'var Fortschritt Math.round (evt.loaded * 100/evt.total) überprüfen können, =;' produziert eine gültige Zahl zwischen 0 und 100 jedes Mal? Außerdem erstellen Sie den Fortschrittsbalken bei jedem Klicken auf die Schaltfläche neu, was sinnlos ist. Verschieben Sie '$ (" # progressbar "). Progressbar ({ max: 100,' ... etc) außerhalb Ihres Click-Handlers. Verschieben Sie auch 'evt.preventDefault();' als erste Zeile in Ihrem Click-Handler, sonst Sie riskieren Sie die Seite, die einen vollen Postback macht, bevor der Ajaxanruf Zeit hat, zurückzukommen – ADyson

hallo Herr stellen Sie bitte den vollen Code zur Verfügung Ich bin frischer in jquery –

i will add following jquery reference and it is working fine. 

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script src="Scripts/jquery-ui.js"></script> 
    <script type="text/javascript" src="/js/jquery/ui/jquery.ui.progressbar.min.js"></script>

Quelle

2017-01-13 09:19:06

Sie müssen wahrscheinlich

var files = $("#<%= FileUpload1.ClientID %>").get(0).files;

Gleiches gilt für die Schaltfläche wird umbenennen

$("#<%= Button1.ClientID %>").click(function (evt) {

asp.net die IDs der Bedienelemente auf der Client-Seite, um sicherzustellen, geht verwenden Es gibt keine Duplikate.

Quelle

2017-01-10 13:35:17 VDWWD

auch funktioniert es nicht Freundlicherweise etwas tun als notwendig –

–

Ich werde folgende jquery Referenz hinzugefügt und funktioniert gut. Vielen Dank –

jquery Fortschrittsbalken funktioniert nicht

Antwort

Verwandte Themen