PHP 上传、解压和进度条答案

【问题标题】：PHP Upload, extract and progressbarPHP 上传、解压和进度条
【发布时间】：2014-12-27 18:25:40
【问题描述】：

我需要帮助来为我的 php 上传网站创建进度条。我已经对上传和提取部分进行了排序，但我需要进度条方面的帮助。我不知道该怎么做。另外，上传文件是否有最大文件大小？

HTML

<?php if($message) echo "<p>$message</p>"; ?>
<form enctype="multipart/form-data" method="post" action="">
<label>Choose file (.zip): <input type="file" name="zip_file" /></label>
<br />
<input type="submit" value="Upload" name="submit" value="Upload" />
</form>

PHP

<?php
if($_FILES["zip_file"]["name"]) {
  $filename = $_FILES["zip_file"]["name"];
  $source = $_FILES["zip_file"]["tmp_name"];
  $type = $_FILES["zip_file"]["type"];

  $name = explode(".", $filename);
  $accepted_types = array(
    'application/zip', 
    'application/x-zip-compressed', 
    'multipart/x-zip', 
    'application/x-compressed');                          

  foreach($accepted_types as $mime_type) {
    if($mime_type == $type) {
      $okay = true;
      break;
    } 
  }

  $continue = strtolower($name[1]) == 'zip' ? true : false;
  if(!$continue) {
    $message = "[...] not a .zip file. Please try again.";
  }
  $target_path = "./".$filename;
  if(move_uploaded_file($source, $target_path)) {
    $zip = new ZipArchive();
    $x = $zip->open($target_path);
    if ($x === true) {
      $zip->extractTo("./");
      $zip->close();

      unlink($target_path);
    }
    $message = "Your .zip file was uploaded and unpacked.";
  } else {  
    $message = "There was a problem with the upload. Please try again.";
  }
}
?>

【问题讨论】：

标签： php html upload progress-bar

【解决方案1】：

据我所知，您必须使用 JavaScript 来执行此操作。通过 AJAX 调用发布您的数据并初始化进度条。随着时间的推移对其进行动画处理，以便栏“填满”。

最终，AJAX 调用将完成并返回响应，调用完成后您可以完成动画。这就是我假设大多数进度条的工作方式，因为它们通常会上升然后停止 99% 左右，直到帖子返回它的“完整状态”。

在任何情况下，您都会有一个进度条，例如，由 <div> 表示，其宽度会随着时间的推移而增加，或者数字会上升等等......您可以使用JavaScript 和/或 jQuery。希望这能让您朝着正确的方向开始。

编辑

这里是一个教程链接，该教程描述了使用 AJAX 将文件上传到服务器所需的步骤：Uploading Files with AJAX

【讨论】：

感谢您的回复，我一定会试一试的！

【解决方案2】：

您可以进行一些更改以适应，但如果您想要一个进度条，这会非常有效。您可以添加更多事件侦听器并按照您的意愿进行操作。我希望这对你来说是一个很好的起点。

function uploadFile(){
    var file = document.getElementById("zip_file").files[0];
    var formdata = new FormData();
    formdata.append("zip_file", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", function(event) { runprogress(event); } , false);
    ajax.addEventListener("load", function(event) {uploadcomplete(event); }, false);
    //Target your php file. 
    ajax.open("POST", "upload.php");
    ajax.send(formdata);
}
function runprogress(event){
    //The progress %, you might want to Math.round(percent) 
    var percent = (event.loaded / event.total) * 100;
}
function uploadcomplete(event){
    //This will = to your php reply.
    var AjaxReply=event.target.responseText;
}

【讨论】：