创建自定义上传进度条

2022-01-09 00:00:00 upload jquery php

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

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)

相关文章