如何在 PHP 5.4 中实现基本的文件上传进度条？

Question

我注意到这是 PHP 5.4 中新增的一项改进。据我了解，此功能使用 SESSION 状态，为了让它显示出来，您需要一些 JavaScript 来更新 HTML。我相信 JavaScript 是通过按提交按钮来触发的。并且可以设置间隔计时器以检查进度。

我想做的就是将进度更新到 div 的 HTML 中。（例如：25%...35%）

我目前的理解如下：
- 您需要一个带有隐藏值的表单
- 这将创建一个名为该名称的 SESSION VARIABLE，并在其中保存信息
- 您需要观察进度以获取其状态

选项：
- 方法 1：使用在线上找到的预先构建的工具。很少/没有人解释它。
- 方法 2：将文件发送到另一个 PHP 文件，并使用 JSinterval 检查其进度。
- 方法 3：是否有一种方法可以在同一页上完成所有操作？

- William James

---

你尝试过什么？你有在 http://php.net/manual/en/session.upload-progress.php 上查看吗？ - Sorin Trimbitas

我对这个过程感到困惑。你是在强制Javascript提交表单后获得状态吗？还是通过使用onclick事件开始上传并且只是获取其状态？ - William James

@SorinTrimbitas 我自己也不确定XHR是什么。但我理解你的意思...将输出发送到另一个php页面，并在间隔期间获取其SESSION状态。几乎创建了使用拉取获取信息的“观察者”设计模式。 - William James

XHR = XMLHttpRequest（http://en.wikipedia.org/wiki/XMLHttpRequest）。是的，在文件上传期间观察SESSION值。 - Sorin Trimbitas

使用jQuery的.ajax方法是最简单的方式（而且没有浏览器兼容性问题）。 - Sorin Trimbitas

Answer 1

<div id="progress"></div>
<form action="/upload.php" method="POST" enctype="multipart/form-data" id="upload">
 <input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="upload" />

 <input type="file" name="file" id="file" />
 <input type="submit" value="Upload" onclick="upload()"/>
</form>

    <script>
      //Check Sumbit has been clicked; either onclick or event handler
      //Setup an interval timer updating the 'PROGRESS' div each check
      //Each Interval: Get SESSION VARIABLE status and Update the div 'PROGRESS'
      //Once file has completed; Do we redirect or submit the form?

    function upload()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("progress").innerHTML=setInterval(function(){xmlhttp.responseText},500);
        }
      }
    xmlhttp.open("POST","upload_progress.php",true);
    xmlhttp.send();

    }

</script>

- William James

---

小心一些你可能犯的小错误，例如 setInterval 部分的 "=="。 - Sorin Trimbitas

谢谢 - 我会编辑它。 那么如何进一步操作呢？比如上传完成后如何刷新当前页面？ - William James

好吧，我想我可以通过JavaScript向我的页面添加更多HTML来上传文件 :D - William James