Question

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

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

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

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

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

Answer 1

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

此multiple file upload tutorial使用jQuery + AJAX Upload ...它在服务器端使用$ _FILES，并将转换特殊的＆lt; div＆gt;在客户端进行＆lt; form＆gt;。我猜你可以调整它以满足你的需求。

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

有很多关于这个主题的开源项目。不幸的是，这不是无关紧要的实现（至少以你想要的方式实现 - 否则我们会在旧的Netscape时代看到这一点）。

从好的方面来看，HTML5会让您更轻松，因为您可以在this demo和this one中看到。

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

Answer 2

jquploader使用表单内的信息，例如action属性值作为上传脚本。但我有一段时间没有更新它，它缺乏像uploadify一样的所有带和口哨脚本（这是一个很好的脚本顺便说一句）。看看它是否可以作为你调整的基础。

Answer 3

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

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

Answer 4

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

Answer 5

多么有趣，我刚看到Simon Willison博客关于Plupload，这是一个JavaScript库，我认为它会上传进度条（等等）。

它使用Flash，Silverlight或其他任何可用的东西，但我认为抽象远离您，所以您仍然使用常规HTML表单上传。

Answer 6

您必须检查服务器上已经存在的文件部分的大小，然后在每个Ajax的客户端上获取它，您可以在其中绘制进度条。（记得先检查孔数据的大小，计算出的含量;-)）

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

6 个答案: