钥匙要点
- >在完成时为当前进度值和值提供属性的HTML5 Progress标签可用于创建图形文件上传进度栏，尽管作者选择使用标准P标签来用于更多样式选项。
可以使用CSS进行进度栏的样式，而绿色栏则作为图形创建的宽度是进度元素的两倍，并且在上传成功或失败时应用了固体色。- >
>通过修改uploadfile（）函数，添加一个“进度”事件处理程序函数来计算新的背景位置，并在上传完成时设置“成功”或“失败”类，从而在JavaScript中实现了进度栏。 -
在我以前的帖子中，我们发现了如何使用HTML5文件拖放，使用JavaScript打开文件，并使用AJAX上传文件。在本系列的最后一部分中，我们涵盖了该过程中最令人兴奋的部分：图形进度条！
文件上传进度条提供了必不可少的用户反馈，但众所周知，它们很难实施。到现在为止。 Firefox和Chrome都支持提供进度事件处理程序的XMLHTTPRequest2对象。但是首先，让我们考虑如何实施进度标准……
html5进度标签
新的进度标签提供了两个属性：
值：当前的进度值-
最大：完成时的值-
该标签在此演示中本来是理想的选择，尽管它在Chrome中得到了支持，但它仅出现在Firefox 6中。此外，这两个浏览器都没有提供许多样式属性，因此我将其放下以支持标准的P标签。这是小时候附加到Div的
具有ID“进度”。
造型进度栏
我们的p标签将在边界框中显示文件名的大小为250px：
对于绿色条本身，我创建了一个图形，其宽度是进度元素（500px）的两倍。左250px是彩色的，右250px是透明的：
#progress p
{
display: block;
width: 240px;
padding: 2px 5px;
margin: 2px 0;
border: 1px inset #446;
border-radius: 5px;
}
登录后复制
登录后复制
该图形用作进度栏的背景图像，并定位在“ x％0”中，其中x％表示剩余（未完成）的比例，即。
>进度从“背景位置：100％0”开始，即剩余100％-
>进度以“背景位置：0％0”结束，即没有什么剩下的-
“背景位置：30％0”意味着70％已经完成：
-
当上传成功或失败时，通过设置类来应用纯色：
#progress p
{
display: block;
width: 240px;
padding: 2px 5px;
margin: 2px 0;
border: 1px inset #446;
border-radius: 5px;
}
登录后复制
登录后复制
在JavaScript中实现进度栏
现在，我们可以修改我们的uploadfile（）函数。遇到有效的JPG文件时，我们将新的P标签附加到#Progress元素，然后将文件名添加为文本：
#progress p.success
{
background: #0c0 none 0 0 no-repeat;
}
#progress p.failed
{
background: #c00 none 0 0 no-repeat;
}
登录后复制
现在，我们需要“进度”事件处理程序功能。这将接收一个带有.LOADAD和.TOTAL属性的对象 - 计算新的背景问题是必要的一点数学：
// upload JPEG files
function UploadFile(file) {
var xhr = new XMLHttpRequest();
if (xhr.upload && file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {
// create progress bar
var o = $id("progress");
var progress = o.appendChild(document.createElement("p"));
progress.appendChild(document.createTextNode("upload " + file.name));
登录后复制
如果您熟悉Ajax，则可以认识到现有的StateChange事件处理程序。这确定了何时上传完成并相应地设计进度栏（如果上传成功，则将“成功”类设置）：
// progress bar
xhr.upload.addEventListener("progress", function(e) {
var pc = parseInt(100 - (e.loaded / e.total * 100));
progress.style.backgroundPosition = pc + "% 0";
}, false);
登录后复制
最后，我们像以前一样将文件发送到我们的PHP服务器：
// file received/failed
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) {
progress.className = (xhr.status == 200 ? "success" : "failure");
}
};
登录后复制
我们终于有了一个解决方案：
- 启用文件拖动并滴入网页元素
>
- >分析和显示在客户端上删除文件
- 异步将文件上传到服务器
- 显示上传期间的图形进度栏
>使用渐进式增强来支持大多数浏览器-
不需要JavaScript库。
-
但是，请查看演示页面，但是请注意，这是在没有PHP的服务器上托管的，因此不会发生文件上传。要测试它，请下载文件以检查代码并将其托管在您自己的服务器上。
希望您喜欢这个系列，并考虑文件拖放如何帮助您的Web应用程序。
如果您喜欢阅读这篇文章，那么您会喜欢学习；从大师那里学习新鲜技能和技术的地方。成员可以立即访问SitePoint的所有电子书和交互式在线课程，例如Learn HTML5。
>关于HTML5 JavaScript文件上传进度栏
的经常询问问题（常见问题解答）
>如何自定义进度栏的外观？
>可以使用CSS自定义进度栏的外观。您可以更改颜色，高度，宽度甚至进度条的形状。例如，要更改颜色，您可以使用“背景色”属性。您也可以使用“边界 - 拉迪乌斯”属性使进度条形圆形或圆形。请记住针对CSS中正确的类或ID以将这些更改应用于进度栏。
我可以将此进度栏用于多个文件上传吗？
是的，您可以使用此进度用于多个文件上传的栏。但是，您需要修改JavaScript代码以处理多个文件。您可以在输入标签中使用“多个”属性来选择多个文件。然后，在您的JavaScript中，您需要循环浏览文件并单独上传它们，并为每个文件更新进度栏。
>
>如何在进度栏上显示上传完成的百分比？ '活动听众。您可以通过将加载的金额除以总量并乘以100来计算百分比。然后，将此值设置为Progress Bar元素的文本内容。
为什么我的进度栏在文件上传期间不更新？
如果您的进度栏在文件上传过程中没有更新，则可能是由于几个原因所致。一个常见的原因是“进度”事件听众无法正确设置。确保已将事件侦听器添加到正确的对象中，并正确拼写事件名称。另外，检查事件内部的代码是否正确更新了进度栏的值和最大属性。
我可以将此进度栏与其他编程语言一起使用，例如PHP或Python？是的，您可以将此进度栏与其他编程语言（如PHP或Python）一起使用。进度栏是使用HTML和JavaScript实施的，这些HTML和JavaScript是客户端技术，可以与任何服务器端技术进行交互。您将需要在JavaScript代码中修改AJAX请求以将文件发送到您的服务器端脚本，并且您的服务器端脚本将需要处理文件上传并返回进度信息。
>我使Progress bar顺利进行动画？
>使进度栏顺利进行动画，您可以使用CSS过渡。将“过渡”属性添加到CSS中的进度条元素，指定过渡的属性（例如'width'），过渡的持续时间和时序函数（例如，'lineal' ，'sibe-out-out'）。
>在文件上传过程中如何处理错误？
在文件上传过程中处理错误可以在'错误'事件中完成听众。当上传期间发生错误时，该事件将触发。如果侦听器，您可以向用户显示错误消息，并重置进度栏。
我可以取消文件上传并重置进度栏吗？文件上传并重置进度栏。要取消文件上传，您可以在XMLHTTPRequest对象上调用“流产”方法。要重置进度栏，您可以将其值属性设置为0。
>如何限制上传的文件大小？>限制可以在JavaScript代码中完成的文件大小以进行上传。在发送AJAX请求之前。您可以从文件对象的“大小”属性中获取文件的大小，如果超出您的限制，请显示错误消息并中止上传。
>我可以将此进度栏用于其他类型的AJAX请求，而不仅仅是文件上传？
是的，您可以将此进度栏用于其他类型的AJAX请求，而不仅仅是文件上传。对于任何类型的AJAX请求，“进度”事件均可触发，而不仅仅是文件上传。您将需要修改JavaScript代码以发送适当的AJAX请求，并根据请求的进度更新进度栏。以上是如何在HTML5和JavaScript中创建图形文件上传进度条的详细内容。更多信息请关注PHP中文网其他相关文章！
