Php 向旧学校文件上载添加不引人注目的进度条

大家都知道，新一代的花式文件上传器，大多是基于Flash的文件上传器，在上传时可以显示一个进度条——这是一个很大的改进，尤其是对于不稳定和低带宽的连接

然而，这些上传者都有自己的逻辑，即如何在客户端处理上传。我正在寻找一种不引人注目的方式来“美化”现有的经典文件上传，即在普通文件上传表单中引入进度条

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

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

---

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

在（jQuery插件）中使用的技术是否满足您的需要

使用表单中的信息，例如操作属性值作为上载脚本。但是我已经有一段时间没有更新它了，它缺少像uploadify这样的所有belt和whistles脚本（顺便说一句，这是一个优秀的脚本）。看看它是否可以作为您调整的基础。

如果您使用PHP5.2及以上版本，IBM的这一功能可以帮助您

这使用jQuery+。。。它在服务器端使用$\u文件，并将在客户端转换一个特殊文件以生成一个。我想你可以调整它以满足你的需要

如果调整最后一个参数太棘手，则启用是另一个选项

有几十个开源项目涉及这个主题。不幸的是，这并不是一件可以无缝实现的小事（至少以您想要的方式实现——否则我们早就可以在Netscape的好日子里看到这一点了）

从好的方面看，HTML5将缓解这一问题，正如您在和中所看到的

---

我希望这对您的集成有所帮助，祝您好运。

我们通过安装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;
}

$upload_id=genUploadKey（）；
函数genUploadKey（$length=11）{
$charset=“abcdefghijklmnopqrstuvxyzabefghijklmnopqrstuvxyzo123456789”；
对于（$i=0；$i<$length；$i++）
$key.=$charset[（mt_rand（0，（strlen（$charset）-1）））]；
返回$key；
}

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

extract（$\u请求）；
//处理上载进度请求的servlet：
如果（$upload\u id）{
$data=uploadprogress\u get\u info（$upload\u id）；
如果（！$data）
$data['error']='upload id not found'；
否则{
$avg_kb=$data['speed_average']/1024；
如果（$avg_kb多么有趣，我刚刚看到Simon Willison的博客，这是一个JavaScript库，我认为它可以上传文件进度条（以及其他东西）

它使用Flash、Silverlight或其他任何可用的工具，但我认为这一切都会从您那里抽象出来，因此您仍在使用常规HTML表单进行上载。
您必须检查服务器上已准备就绪的文件部分的大小，然后根据Ajax在客户端上获取它，以便绘制进度条。（记住在计算百分比之前检查孔数据的大小；-））
Uploadify很棒，但据我所知，所使用的技术无法与发送包含各种数据的完整表单很好地集成，至少不需要调整。这看起来完全正确。我会看看是否可以将其用作基础。如果我理解正确，这并不是我需要的：我希望解决方案能够集成这是一件很难实现的事情，我开始悬赏，看看是否有什么进展。顺便说一句，对于HTML5演示，你需要一个最新的浏览器（不是IE）测试它们。FF3、Chrome或Safari 4应该可以。这看起来是最有希望的，我接受这一个。干杯！很乐意帮助。如果我的答案太简洁，我很乐意修改。你打算怎么做？检查服务器上已经存在的部件的大小？
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) {
...

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