如何在HTML5和JavaScript中创建图形文件上传进度条

钥匙要点

• >在完成时为当前进度值和值提供属性的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");
			}
		};

我们终于有了一个解决方案：

1. 启用文件拖动并滴入网页元素
>
2. >分析和显示在客户端上删除文件
3. 异步将文件上传到服务器
4. 显示上传期间的图形进度栏
>使用渐进式增强来支持大多数浏览器
不需要JavaScript库。
6. 但是，请查看演示页面，但是请注意，这是在没有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中文网其他相关文章！