创建自定义上传进度栏 [英] 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％完成"加图形条)
• 上载表单时重定向整个页面，确定

(哦，顺便说一句，检查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屋！