将不显眼的进度条添加到老式文件上传中

php javascript html file-upload flash

2022-08-30 21:19:02

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

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

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

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

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

答案 1

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

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

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

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

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

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

答案 2

我们通过安装 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" />

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