创建自定义上传进度条 [英] Creating a custom upload progress bar

问题描述

我见过所有的上传进度条插件、小部件等——它们都很糟糕.它们要么太笨重，包含太多无用的代码，要么无法正常工作.

I have seen all the upload progress bar plugins, widgets, etc. – they all suck. They're either too bulky with too much useless code or they don't work.

我想知道在哪里可以阅读有关如何显示简单上传进度指示器的信息.大多数浏览器在下方都有一个状态进度条，但在与客户打交道时仅使用它不是很专业.

What I want to know is where I can read up on how to display an easy upload progress indicator. Most browsers have a status progress bar on them below, but it isn't very professional to use just that when dealing with clients.

浏览器是如何做到的?我想知道浏览器如何工作以指示上传状态的内部结构，以便我可以使用 PHP &jQuery.

How does the browser do it? I want to know the internals of how the browser works with for indicating the status of something uploading so that maybe I can make something using PHP & jquery.

谢谢.

推荐答案

既然要使用 PHP，那我先从 uploadprogress 扩展(默认情况下，在上传完成之前，PHP 不会为您提供任何数据；此扩展提供此类服务器端功能).请注意，它需要 PHP 5.2+，并且可能对配置选项很挑剔.另请参阅其 评论和演示和故障排除提示).PHP 文档评论中提供了一个简短的概述.

Since you want to use PHP, I'd start with the uploadprogress extension (PHP doesn't, by default, give you any data about until the upload is completed; this extension provides such server-side functionality). Note that it requires PHP 5.2+ and can be picky about configuration options. Also see its commentary and demo and troubleshooting hints). A short overview available in PHP documentation comments.

使用扩展程序，您可以获得一些上传统计信息；然后您可以通过 AJAX 轮询服务器并更新某种进度条.

Using the extension, you can get some stats on the upload; then you can poll the server through AJAX and update some sort of progress bar.

更具体一点:

• 获取表单的唯一标识符，并将其包含在隐藏字段中
• 上传应该在 IFRAME 中运行 - 某些浏览器不允许 DOM 更新到运行上传的同一页面
• 通过 AJAX 轮询服务器(使用标识符指定您感兴趣的上传内容)并解析结果(IIRC，您会得到类似bytes_uploaded => 123, content-length=> 1000")
• 更新您的进度条(显示方式由您决定，我使用x% done"加上图形条)
• 表单上传成功后重定向整个页面

(哦，顺便说一句，检查 PHP 的 upload_max_filesize 和 post_max_size 设置，因为它们都限制了最大上传大小)

(Oh, and btw, check PHP's upload_max_filesize and post_max_size settings, as both limit the maximum upload size)

这篇关于创建自定义上传进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！