我用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>
答案 0 :(得分：2)
如果想要真正的进步，请使用XMLHttpRequest
方法是这样的（用提交形式的事件监听器包装此代码）
Sub WorkBook_Open()
Application.Run ("CommonMacroMR.xlsm!Workbook_Open")
End Sub
答案 1 :(得分：0)
您在样式标签中还有一个额外的}。这会打乱CSS，这就是为什么看不到结果的原因。
除此之外，一切正常，但是我自由调整了CSS，以便该栏实际上从左侧开始absolute定位。并且起始宽度为css中的0。
我摆弄了我的例子： https://jsfiddle.net/0escqr2w/20/
建议的解决方案：第一次单击后禁用按钮。