我见过所有的上传进度条插件、小部件等——它们都很糟糕。它们要么太笨重，包含太多无用的代码，要么无法正常工作。
我想知道在哪里可以阅读有关如何显示简单上传进度指示器的信息。大多数浏览器在下方都有一个状态进度条，但在与客户打交道时仅使用它不是很专业。
浏览器是如何做到的？我想知道浏览器如何工作以指示上传状态的内部原理，以便我可以使用 PHP 和 jquery 制作一些东西。
谢谢。
【问题讨论】：
由于您想使用 PHP，我将从 uploadprogress extension 开始（默认情况下，在上传完成之前，PHP 不会为您提供任何数据；此扩展程序提供此类服务器端功能）。请注意，它需要 PHP 5.2+，并且可能对配置选项很挑剔。另见其commentary and demo 和troubleshooting hints)。 PHP 文档comments 中提供了一个简短的概述。
使用扩展程序，您可以获得一些上传统计信息；然后您可以通过 AJAX 轮询服务器并更新某种进度条。
更具体一点：
（哦，顺便说一句，检查 PHP 的 upload_max_filesize 和 post_max_size 设置，因为它们都限制了最大上传大小）
【讨论】：
没有可靠的方法来获取使用 JavaScript 上传文件的进度。许多浏览器都缺少对XMLHttpRequest upload.onprogress 事件的支持，即使是HTML5，您也不可避免地需要转向Flash，或者其他文件上传方法。
在询问了this question 之后，我最终决定使用plupload 来满足我的上传需求。
【讨论】：
Javascript/Ecmascript 不能与本机浏览器功能混淆（主要使用 C/C++ 以及访问 TCP/UDP 套接字的 OS APIs。
要显示带有JS 的进度条，您需要服务器反馈。这可以通过使用服务器polling 来实现，例如COMET。
但在这一点上，它从来没有像浏览器内置进度条那样准确。它可能会随着HTML5 WebSockets 而改变。
要获得准确的结果，您需要持续的连接。您可以fake 和gild 客户端-服务器请求延迟，但它仍然存在。我不确切知道Flash 是如何处理这个问题的，但我想它也没有面向连接的流（如果我在这里错了，请纠正我）。
【讨论】：
xhr.upload.onprogress 事件（在 Firefox 3.5 中松散支持）应该提供的东西，但我从来没有让它可靠地工作。
我知道这不是您要找的东西，但我最近一直在使用 plupload 进行上传，而且看起来不错，而且不完全依赖 flash 或 html5
示例：
uploader.start();附加到uploader.start(); 钩子上。如果遇到困难，值得在 plupload 网站的论坛上提问，他们很擅长回答问题！
$(function(){
//plupload
var uploader = new plupload.Uploader({
runtimes : 'gears,html5,flash',
browse_button : 'pickfiles',
container : 'form_2',
max_file_size : '10mb',
url : '<?php echo SITE_ROOT ?>plupload/upload.php',
//resize : {width : 320, height : 240, quality : 90},
flash_swf_url : '<?php echo SITE_ROOT ?>plupload/js/plupload.flash.swf',
filters : [
{title : "Image files", extensions : "jpg,gif,png"}
]
});
uploader.init();
uploader.bind('FilesAdded', function(up, files) {
uploader.start();
});
uploader.bind('UploadProgress', function(up, file) {
if(file.percent < 100 && file.percent >= 1){
$('#progress_bar div').css('width', file.percent+'%');
}
else{
$('#progress_bar').fadeOut(600);
}
});
【讨论】：