首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >为老式的文件上传添加不显眼的进度条

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

Stack Overflow用户
提问于 2009-10-30 22:58:56
回答 6查看 2.2K关注 0票数 19

大家都知道,新一代花哨的,主要是基于闪存的文件上传器,如,可以在上传时显示进度条-这是一个巨大的改进,特别是对于不稳定和低带宽的连接。

然而,这些上传程序都有自己的逻辑,即如何在客户端处理上传。我正在寻找一种不引人注目的方式来“幻想”现有的,经典的文件上传,即引入了一个进度条到正常的文件上传表单

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

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

这并不完全是所有基于Flash的上传器所做的:他们可以使用表单中的数据,但他们不提供按原样提交表单的可能性,这就是我正在寻找的。我正在寻找一个(可能)基于闪存的上传功能采取了进一步的

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2010-02-11 01:40:06

我们通过安装PECL扩展pecl-uploadprogress并向表单添加一个简单的AJAX回调来实现这一点:

生成上传密钥:

代码语言:javascript
复制
$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):

代码语言:javascript
复制
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库(还包括上述代码片段),并将其与您的表单集成:

代码语言:javascript
复制
<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>

将此内容添加到您的上传表单中:

代码语言:javascript
复制
<input name="UPLOAD_IDENTIFIER" type="hidden" value="$upload_id" />

这应该能起到作用。这是从我们的代码库中提取出来的,可能无法开箱即用。但它应该告诉你这个想法。

票数 3
EN

Stack Overflow用户

发布于 2010-02-06 04:57:20

如果您使用PHP5.2或更高版本,IBM制的file upload progress tutorial可以为您提供帮助。

multiple file upload tutorial使用jQuery + AJAX Upload...它在服务器端使用$_FILES,并会在客户端转换一个特殊的。我想你可以调整它来满足你的需要。

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

有几十个开源项目涵盖了这个主题。不幸的是,这不是无缝实现的微不足道的东西(至少在你想要的方式上-否则我们已经在Netscape的好日子里看到了这一点)。

从好的方面来看,正如您在this demothis one中看到的那样,HTML5将简化这一过程。

我希望这对你的集成有帮助,并祝你好运。

票数 5
EN

Stack Overflow用户

发布于 2009-10-31 15:13:04

jquploader使用表单内部的信息,比如动作属性值作为上传脚本。但是我已经有一段时间没有更新它了,而且它缺少像uploadify这样的那些花哨的脚本(顺便说一下,这是一个很好的脚本)。看看它是否可以作为你调整的基础。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1650317

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档