如何向旧式文件上传添加不显眼的进度条?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (6)
  • 关注 (0)
  • 查看 (107)

我正在寻找一种低调的方式向普通文件上载表单引入进度条

提问于
用户回答回答于

我们通过安装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回调处理程序(例如.upadProgress.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。上载进度库(其中还包括上面的片段)并与表单集成:

<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" />
用户回答回答于

必须检查服务器上已准备好的文件部分的大小,然后在每个Ajax客户端获取它,在那里可以绘制进度条。

用户回答回答于
用户回答回答于
用户回答回答于

所属标签

可能回答问题的人

  • 西风

    renzha.net · 站长 (已认证)

    9 粉丝1 提问5 回答
  • uncle_light

    5 粉丝518 提问3 回答
  • 学生

    2 粉丝477 提问3 回答
  • 军哥

    重庆雷驰信息技术有限公司 · 经理 (已认证)

    5 粉丝1 提问3 回答

扫码关注云+社区

领取腾讯云代金券