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

Question

你们都知道新一代花哨的,主要是基于Flash的文件上传器,如SWFUpload,可以在上传时显示进度条 - 这是一个很好的改进,特别是对于抖动和低带宽的连接.

但是,这些上传程序都带有自己的逻辑,如何在客户端处理上传.我正在寻找一种不引人注目的方式来"模仿"现有的经典文件上传,即将进度条引入正常的文件上传表单.

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

我正在寻找一种解决方案,将调整保持在绝对最小值,例如,将自身添加到普通表单的onsubmit事件的组件,执行文件上载,显示一个很好的进度条,放置生成的临时(服务器端)文件进入表单的路径,并提交它.在服务器端,我只需要修改我的脚本以使用flash上​​传器提供的文件路径,而不是$ _FILES和consorts,并考虑一下安全性.

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

Answer 1

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

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

如果调整最后一个是太棘手,尤伯杯上载于SourceForge上是另一种选择.

有几十个开源项目涉及这个主题.不幸的是,这不是无关紧要的实现(至少以你想要的方式实现 - 否则我们会在旧的Netscape时代看到这一点).

从好的方面来看,HTML5将简化这一点,你可以在这个演示和这个演示中看到.

我希望这对你的整合有所帮助并祝你好运.

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

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

这应该够了吧。这是从我们的代码库中提取的，可能无法开箱即用。但它应该告诉你这个想法。