我在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 "listen" 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 "redraws" 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 "lost in time". </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>© Fix Audio. All rights reserved. Design by
<a href="http://templated.co" rel="nofollow">TEMPLATED</a>.
</p>
</div>如果你想要真正的进步，请使用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);
你有一个额外的}内部样式标签。这打破了你的CSS，这就是为什么你看不到结果。
除此之外，一切正常，但我冒昧地调整css，以便酒吧实际上从左侧开始absolute定位。并且css中的起始宽度为0。
我用我的例子做了一个小提琴：https://jsfiddle.net/0escqr2w/20/
建议的解决方案：首次单击后禁用该按钮。