javascript - 使用javascript正确更新进度条

Question

我用 php 编写了一个上传脚本，用于处理我正在构建的网站上的上传 html 表单。我添加了一个进度栏，以便当用户提交表单时，他们可以看到文件上传的进度 - 但我无法弄清楚如何根据已上传的文件量使上传栏动画。单击上传按钮时，动画会快速跳转到 100%。我对此很陌生，所以我为我的无知道歉。我通常去尝试学习的地方，w3schools，对于如何将文件上传进度与动画联系起来似乎不明确。这是我的代码:

function update() {
  var element = document.getElementById("myprogressBar");   
  var width = 1;
  var identity = setInterval(scene, 10);
  function scene() {
    if (width >= 100) {
      clearInterval(identity);
    } else {
      width++; 
      element.style.width = width + '%'; 
      element.innerHTML = width * 1  + '%';
    }
  }
}

#Progress_Status {
  width: 50%;
  background-color: #ddd;
  margin: auto;
  text-align: center;
}

}

#myprogressBar {
  width: 1%;
  height: 35px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 32px;
  color: black;
  margin: auto;
}

<link href="http://fonts.googleapis.com/css?family=Pontano+Sans" rel="stylesheet" type="text/css" >  

<div id="header-wrapper">
  <div class="container" id="header">
    <div id="logo">
      <h1><a href="#">Fix Audio</a></h1>
    </div>
  </div>
  <div class="container" id="banner">
  <div class="heading">
  <h2>A fresh approach to automated audio post production</h2>

  <p>In life there are no retakes. Most of your precious memories are captured on the fly with a mobile phone using a low quality inbuilt microphone. The cost of using traditional audio professionals and their expensive sound suites to improve audio quality has always been prohibitive. Until now.</p>
</div>
</div>
</div>

<div class="container" id="three-column">
  <div id="tbox1">
    <div class="title">
      <h2>Machine Learning</h2>
    </div>

    <p>Fix Audio uses cutting edge recognition and measurement algorithms to &quot;listen&quot; like a human would.</p>
  </div>

  <div id="tbox2">
    <div class="title">
      <h2>Human Experience</h2>
    </div>

    <p>Fix Audio draws on the experience of its human creators, who have worked at the top of the audio post production field for decades.</p>
  </div>

  <div id="tbox3">
    <div class="title">
      <h2>Simulated Processes</h2>
    </div>

    <p>Fix Audio follows decision making flows based on quantifying and emulating what a human audio engineer would do in the same situation.</p>
  </div>
</div>

<div id="wrapper3">
  <div class="container" id="portfolio">
    <div class="title">
      <h2>Hear the difference</h2>
      <span class="byline">Before and afters showcasing Fix Audio in action</span>
    </div>

    <div class="column1">
    <div class="box">
      <iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="157" src="https://www.youtube.com/embed/uMrUy5WUKNQ" width="280"></iframe>
      <h3>Missing channel / Too soft</h3>
      <p>Fix Audio detects these issues and intelligently compensates for them.</p>
    </div>
  </div>

  <div class="column2">
    <div class="box">
      <iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="157" src="https://www.youtube.com/embed/mBCbZ7tlVMA" width="280"></iframe>
      <h3>Digital distortion</h3>
      <p>Fix Audio &quot;redraws&quot; squared off waveforms to make distorted audio listenable again.       </p>
    </div>
  </div>    
  <div class="column3">
    <div class="box">
      <a href="#">
        <iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="157" src="https://www.youtube.com/embed/15EpKgotL5M" width="280"></iframe>
      </a>
      <h3>What did you say?</h3>    
      <p>Fix Audio fights wind noise and muddiness to make dialogue intelligable again.</p>
    </div>
  </div>

  <div class="column4">
    <div class="box">
      <iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="157" src="https://www.youtube.com/embed/0NOdSS12C28" width="280"></iframe>
      <h3>Restore vintage content</h3>
      <p>Fix Audio revitalises old memories. You may hear things previously &quot;lost in time&quot;.         </p>
    </div>
  </div>
</div>
</div>

<div id="wrapper2">
  <div class="container" id="welcome">
    <div class="title">
    <h2>Now try it for yourself</h2>
</div>
<p>Fix audio was designed so that you can use it with absolute ease. Simply upload your audio or video content, enter your email address, and Fix Audio will work its magic. When it is finished, you will receive a private temporary download in your inbox to your professionally restored content.</p>
</div>
</div>
<div>
  <form action="upload.php" enctype="multipart/form-data" method="post">;
  <h2 style="color: gray; text-align: center;">Select file to upload 
  <div>
    <input id="fileToUpload" name="fileToUpload" type="file" /><br />
    <br />
  </div>    
</div>
</h2>    
<h2 style="color: gray; text-align: center;">Enter email address for return file<br />
  <input id="emailaddress" name="emailaddress" type="text" /><br /><br />
    <div id="Progress_Status">
      <div id="myprogressBar">0%</div>
    </div>
  <br>
  <button onclick="update()">Start Upload</button> 
</h2>
</form>

<div class="container" id="newsletter">
  <div class="title">
    <h2>Newsletter Signup</h2>
    <span class="byline">Stay in touch to receive the latest news on Fix Audio</span>
  </div>
  <div class="content">
  <form action="#" method="post">
  <div class="row half">
    <div class="6u">
      <input class="text" name="name" placeholder="Name" type="text" />
    </div>
    <div class="6u">
      <input class="text" name="email" placeholder="Email" type="text" />
    </div>
  </div>
  <div class="row half">
    <div class="12u">
      <textarea name="message" placeholder="Message"></textarea>
    </div>
  </div>
  <div class="row">
    <div class="12u">
      <a class="button" href="#">Send Message</a>
    </div>
  </div>
  </form>
</div>
</div>
</div>

<div id="wrapper4">
  <div class="container" id="footer">
    <div>
      <header class="title">
        <h2>Get in touch</h2>
        <span class="byline">Follow us on socials to keep up to date with all our latest</span>
      </header>
      <ul class="contact">
        <li><a class="icon icon-twitter" href="#"><span>Twitter</span></a></li>
        <li></li>
        <li><a class="icon icon-dribbble" href="#"><span>Pinterest</span></a></li>
        <li><a class="icon icon-tumblr" href="#"><span>Google+</span></a></li>
        <li><a class="icon icon-rss" href="#"><span>Pinterest</span></a></li>
      </ul>
    </div>
  </div>
</div>

<div class="container" id="copyright">
  <p>&copy; Fix Audio. All rights reserved. Design by 
    <a href="http://templated.co" rel="nofollow">TEMPLATED</a>.
  </p>
</div>

Answer 1

如果你想要真正的进展，请使用 XMLHttpRequest

这就是方法(用表单提交的事件监听器包装此代码)

    var XHR = new XMLHttpRequest();
    var formData = new FormData();
    var file = document.getElementById("fileToUpload").files[0]
    formData.append("file", file);
    // do the same for any other input like this formData.append(inputName, inputValue);

    XHR.upload.onprogress = (e)=> {
        var uploadedData = e.loaded;
        var barLength = uploadedData*100/file.size
       /* barLength between 0% and 100%
        if you want it in px change 100 to the progress bar parentElement width in px */              
    }

    XHR.open("POST", "/yourFormActionURL");

    XHR.send(formData);