为老式文件上传添加不显眼的进度条答案

【问题标题】：Adding unobtrusive progress bar to old-school file uploads为老式文件上传添加不显眼的进度条
【发布时间】：2010-12-11 15:23:45
【问题描述】：

你们都知道新一代花哨的、主要基于 Flash 的文件上传器，例如 SWFUpload，它可以在上传时显示进度条 - 一个很大的改进，尤其是对于不稳定和低带宽的连接。

但是，这些上传者都有自己的关于如何在客户端处理上传的逻辑。我正在寻找一种不显眼的方式来“幻想”现有的经典文件上传，即在普通文件上传表单中引入进度条。

由于上传文件的架构，如果不对客户端进行一些调整，这很可能是不可能的。

我正在寻找一种将调整保持在最低限度的解决方案，例如一个将自身添加到普通表单的 onsubmit 事件的组件，执行文件上传，显示一个漂亮的进度条，将生成的临时（服务器端）文件路径放入表单，然后提交。在服务器端，我只需要修改我的脚本以使用 flash 上传器提供的文件路径，而不是 $_FILES 和 consorts，并考虑一下安全性。

这并不是所有基于 Flash 的上传者所做的：他们可以使用表单中的数据，但他们不提供按原样提交表单的可能性，这正是我要找的。我正在寻找更进一步的（可能）基于 Flash 的上传功能。

【问题讨论】：

标签： php javascript html flash file-upload

【解决方案1】：

如果您使用 PHP 5.2 及更高版本，IBM 的 file upload progress tutorial 可以为您提供帮助。

这个multiple file upload tutorial 使用jQuery + AJAX Upload...它在服务器端使用$_FILES，并将在客户端转换一个特殊的

来生成一个

【讨论】：

顺便说一句，对于 HTML5 演示，您需要一个最新的浏览器（不是 IE）来测试它们。 FF3、Chrome 或 Safari 4 应该没问题。

【解决方案2】：

我们通过安装 PECL 扩展 pecl-uploadprogress 非常简单地实现了这一点，并向表单添加了一个简单的 AJAX 回调：

生成上传密钥：

$upload_id = genUploadKey();
function genUploadKey ($length = 11) {
  $charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  for ($i=0; $i < $length; $i++)
    $key .= $charset[(mt_rand(0,(strlen($charset)-1)))];
  return $key;
}

创建一个 AJAX 回调处理程序（例如 uploadprogress.php）：

extract($_REQUEST);

// servlet that handles uploadprogress requests:
if ($upload_id) {
  $data = uploadprogress_get_info($upload_id);
  if (!$data)
    $data['error'] = 'upload id not found';
  else {
    $avg_kb = $data['speed_average'] / 1024;
    if ($avg_kb<100)
      $avg_kb = round($avg_kb,1);
    else if ($avg_kb<10)
      $avg_kb = round($avg_kb,2);
    else $avg_kb = round($avg_kb);

    // two custom server calculations added to return data object:
    $data['kb_average'] = $avg_kb;
    $data['kb_uploaded'] = round($data['bytes_uploaded'] /1024);
  }

  echo json_encode($data);
  exit;
}

// display on completion of upload:
if ($UPLOAD_IDENTIFIER) {
...

下载 jQuery 和 jQuery.uploadprogress 库（还包括上面的 sn-p）并与您的表单集成：

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.uploadprogress.0.3.js"></script>
<script type="text/javascript">
jQuery(function () {
    // apply uploadProgress plugin to form element
    // with debug mode and array of data fields to publish to readout:
    jQuery('#upload_form').uploadProgress({
        progressURL:'uploadprogress.php',
        displayFields : ['kb_uploaded','kb_average','est_sec'],
        start: function() {
            $('.upload-progress').show();
        },
    success: function() {
            $('.upload-progress').hide();
            jQuery(this).get(0).reset();
        }
    });
});
</script>

将此添加到您的上传表单：

<input name="UPLOAD_IDENTIFIER" type="hidden" value="$upload_id" />

这应该可以解决问题。这是从我们的代码库中提取的，可能无法开箱即用。但它应该告诉你这个想法。

【讨论】：

这个看起来最有前途，我接受这个。干杯！
很高兴为您提供帮助。如果我的回答太简洁，我很乐意修改它。

【解决方案3】：

jquploader使用表单里面的信息，比如action属性值作为上传脚本。但是我有一段时间没有更新它了，而且它缺少像uploadify 这样的脚本（顺便说一句，这是一个很好的脚本）。看看它是否可以作为你调整的基础。

【讨论】：

这看起来完全正确。我会看看我是否可以以此为基础。
如果我理解正确，这并不是我所需要的：我希望该解决方案与经典的基于 POST 的表单提交过程完全集成。这是一件很难实现的事情，我正在开始赏金，看看是否有任何事情发生。

【解决方案4】：

Uploadify（一个 jQuery 插件）中使用的技术是否满足您的需求？ Demo

【讨论】：

Uploadify 很棒，但据我所知，所使用的技术不能很好地与发送包含各种数据的完整表单集成，至少在没有调整的情况下不会。

【解决方案5】：

太有趣了，我刚刚看到 Simon Willison 的关于 Plupload 的博客，我认为它是一个 JavaScript 库，可以用于文件上传进度条（以及其他功能）。

它使用 Flash、Silverlight 或任何可用的东西，但我认为所有这些都从您身上抽象出来，因此您仍然使用常规 HTML 表单进行上传。

【讨论】：

【解决方案6】：

您必须检查服务器上已准备好的文件部分的大小，然后通过 Ajax 在客户端上获取它，您可以在其中绘制进度条。（记得在之前检查孔数据的大小，以计算百分比；-)）

【讨论】：

你打算怎么做？检查服务器上已经存在的部分的大小？