为老式文件上传添加不显眼的进度条-解网

问：

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

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

由于上传文件的架构，如果不在客户端进行一些调整，这很可能无法实现。

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

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

php javascript html flash 文件上传

答：

1赞 artlung 10/31/2009 #1

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

0赞 Pekka 10/31/2009

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

3赞 pixeline 10/31/2009 #2

jquploader 使用表单中的信息，例如 action 属性值作为上传脚本。但是我已经有一段时间没有更新它了，它缺少像 uploadify 这样的所有腰带和口哨脚本（顺便说一句，这是一个出色的脚本）。看看它是否可以成为您调整的基础。

0赞 Pekka 10/31/2009

这看起来完全正确。我会看看我是否可以以此为基础。

0赞 Pekka 2/4/2010

如果我理解正确的话，这并不是我所需要的：我希望该解决方案能够与经典的、基于 POST 的表单提交流程完全集成。这是一件棘手的事情，我正在开始赏金，看看是否有任何事情发生。

5赞 AlexV 2/6/2010 #3

如果您使用 PHP 5.2 及更高版本，IBM 的此文件上传进度教程可以为您提供帮助。

这个多文件上传教程使用jQuery + AJAX上传...它在服务器端使用 $_FILES，并将在客户端转换一个特殊的 <div> 以制作一个 <form>。我想你可以调整它以满足你的需求。

如果调整最后一个太棘手，SourceForge 上的 Uber-Uploader 是另一种选择。

有几十个开源项目涵盖了这个主题。不幸的是，无缝实现这并不是一件容易的事情（至少以你想要的方式 - 否则我们早就看到了这一点）。

从好的方面来说，HTML5 将缓解这种情况，正如你在这个演示和这个演示中看到的那样。

我希望这对您有所帮助，并祝您融入好运。

0赞 AlexV 2/6/2010

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

3赞 hurikhan77 2/11/2010 #4

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

生成上传密钥：

$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 库（其中还包括上述代码片段）并与您的表单集成：

<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" />

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

0赞 Pekka 2/11/2010

这看起来是最有希望的，我接受这个。干杯！

0赞 hurikhan77 2/11/2010

很乐意帮忙。如果我的答案太简洁，我很乐意修改它。

0赞 Paul D. Waite 2/11/2010 #5

多么有趣，我刚刚看到 Simon Willison 关于 Plupload 的博客，这是一个 JavaScript 库，我认为它可以上传文件进度条（以及其他东西）。

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

0赞 Tokk 9/1/2010 #6

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

0赞 Pekka 9/1/2010

你打算怎么做？检查服务器上已有部件的尺寸？

上一个：对 Zend Framework 的承诺 - 有什么反对的论据吗？[关闭]

下一个：是否有记录 GET/POST 参数的标准？

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

Adding unobtrusive progress bar to old-school file uploads

评论

评论

评论

评论

评论

评论