Progress Bar仅在首次上传时直接达到100％，然后按照预期显示上传

问题：当我启动任何浏览器时，它会打开其默认网页，我向我的会话打开会话在该选项卡或同一Web应用程序中使用Progress Bar Web应用程序上传测试文件上传。在新标签中。当我启动第一个文件上传，它显示进度栏即使文件仍在上传。如果我然后再次上传文件，它可以按预期工作，进度栏显示文件为加载，例如20％，43％，80％，98％，然后完成。我正在使用： - https://www.sitepoint.com/tracking-upload-progress-with-php-and-javascript/

我已经稍微修改了它，以找出正在发生的事情。

这个问题发生在我的网站上，该网站位于Internet和本地服务器上。两个系统都是Linux，使用Apache2。Internet上的网站使用PHP 5.6.30。我的本地服务器正在使用php 7.1.5。

使用运行野生动物园，铬或Firefox的手机时，可以再现同样的问题。因此，这看起来像是基于服务器的问题或我在客户端遇到的一些编码问题或服务器端。

我使用这种类型的代码上传视频文件，而我的工作是假设该文件至少在第一个进度百分比加载计算之后，才能完全上传。如果我我认为进度栏读数是错误的，并建议在第一个通行证上获取" 100"答复文件上传应再次尝试。第二个上传始终有效。在我的情况下最大视频文件28MB允许的尺寸。

任何人都可以协助解决这个问题吗？

以下是我两个PHP网页的副本。

File: progress.php
<?php
session_start();
$key = ini_get("session.upload_progress.prefix") . "form_60";
if (!empty($_SESSION[$key]))
  {
    $current = $_SESSION[$key]["bytes_processed"];
    $total = $_SESSION[$key]["content_length"];   
    echo $current < $total ? ceil($current / $total * 100) : 100;
  } else 
  {
      echo "100";
     }
?>
File: upload2.php
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES["userfile"])) {
    // move_uploaded_file()
   $folder = "tmp/"; 
    //upload the file
    move_uploaded_file($_FILES["userfile"["tmp_name"], "$folder" . $_FILES["userfile"]["name"]);
   }
 ?>
 <html>
 <head>
 <title>File Upload Progress Bar</title>
 <style>
   #bar_blank {
   border: solid 1px #000;
   height: 20px;
   width: 300px;
  }
   #bar_color {
   background-color: #006666;
   height: 20px;
   width: 0px;
  }
   #bar_blank, #hidden_iframe {
   display: none;
  }
</style>
</head>
<body>
<div id="bar_blank">
<div id="bar_color"></div>
</div>
<div id="Message"></div>
<form action="" method="POST" 
 id="form_60" enctype="multipart/form-data" target="hidden_iframe">
 <input type="hidden" value="form_60"
 name="<?php echo ini_get("session.upload_progress.name"); ?>">
 <input type="file" name="userfile"><br>
 <input type="submit" value="Start Upload">
</form>
<iframe id="hidden_iframe" name="hidden_iframe" src="about:blank"></iframe>
<!script type="text/javascript" src="upload2.js"></script>
<script type="text/javascript">
var FirstTime = 'Y';
function toggleBarVisibility() {
 var e = document.getElementById("bar_blank");
 e.style.display = (e.style.display == "block") ? "none" : "block";
}
function createRequestObject() {
var http;
if (navigator.appName == "Microsoft Internet Explorer") {
    http = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
    http = new XMLHttpRequest();
}
return http;
}
function sendRequest() {
 var http = createRequestObject();
 http.open("GET", "progress.php", false);  //  was GET
 http.onreadystatechange = function () { handleResponse(http); };
 http.send(null);
}
function handleResponse(http) {
 var response;
 if (http.readyState == 4) {
    response = http.responseText;
    document.getElementById("bar_color").style.width = response + "%";
    document.getElementById("Message").innerHTML = response + "%";
 alert(response);
    if (response < 100) {
        FirstTime = 'N'
        setTimeout("sendRequest()", 1000);
    }
    else {
        alert(response);
        toggleBarVisibility();
        if (FirstTime == 'N')
           {
              document.getElementById("Message").innerHTML = "Done.";
           }
        if (FirstTime == 'Y')
           {
               document.getElementById("Message").innerHTML = "Error.";
               alert('System error, please try again.')
           }
    }
}
}
function startUpload() {
 toggleBarVisibility();
 setTimeout("sendRequest()", 1000);
}
(function () {
   document.getElementById("form_60").onsubmit = startUpload;
})();
</script>
</body>
</html>

我现在找到了下面列出的解决方法。它涉及从我的应用程序中的启动页面中执行虚拟请求。在我的情况下，我使用登录网页放置虚拟代码。

<script type="text/javascript">
function createRequestObject() {
    var http;
    if (navigator.appName == "Microsoft Internet Explorer") {
        http = new ActiveXObject("Microsoft.XMLHTTP");
         }
    else {
        http = new XMLHttpRequest();
         }
    return http;
}
function sendRequest() {
    var http = createRequestObject();
    http.open("GET", "progress.php", false);  //  was GET
    http.onreadystatechange = function () { handleResponse(http); };
    http.send(null);
}
function handleResponse(http)
  {
    var response;
    if (http.readyState == 4) 
      {
         response = http.responseText;
        if (response < 100)
          {
             setTimeout("sendRequest()", 1000);
          } 
      }
}
function startUpload() {
  setTimeout("sendRequest()", 1000);
}
window.onload = function() {
   startUpload();
}
</script>

既然我已经对会话变量有了更多的了解，那么似乎遵循我应该提出的规则： -

session_start((;

在upload2.php网页的开头，因为这是变量信息首先来自的地方。然后工作正常。

看起来，会话似乎在开始时没有在if语句中读取。如果会话不存在，您只会回声100％。如果您要加入此部分：

progress.php

<?php
session_start();
$key = ini_get("session.upload_progress.prefix") . "form_60";
if (!empty($_SESSION[$key]))
  {
    $current = $_SESSION[$key]["bytes_processed"];
    $total = $_SESSION[$key]["content_length"];   
    echo $current < $total ? ceil($current / $total * 100) : 100;
  } else {
     $_SESSION[$key]["bytes_processed"] = 0;    
  }
?>

它不应该直接跳至100％，因为此会话此时将是活动的，而不是在第一次上传之后。未经测试，但值得一试，如果您不击败我，我会在测试服务器上粘贴此代码！

相关内容

最新更新

热门标签：