在 php 中显示加载百分比文本

Question

我是新来的，如果我把这篇文章发错地方了，我深表歉意。

我想要实现的是一个文本，它显示 1%-100% 的百分比，显示文件已上传的数量。

现在，它只显示 "Loading.." 而不是上传..

我在网站中使用 PHP 和 JS。这是 "Loading" 按钮的脚本。

    echo "<form id=\"uploads\" action=\"\" method=\"post\" enctype=\"multipart/form-data\"><input type=\"hidden\" value=\"myForm\" name=\"$upload_name\">
<center><input type=\"file\" value=\"Upload\" name=\"upload_file[]\" class=\"file\" multiple class=\"button2\"/> <br><br><input type=\"button\" id=\"upload\" class=\"button2\" value=\"Upload\" onclick=\"document.getElementById('upload').disabled = 'disabled'; document.getElementById('upload').value = 'Loading...'; document.getElementById('uploads').submit();\"><br><br></center>
</form></center>
";

我该如何实现？请指导我实现此功能的路径。

Answer 1

所以 "without library" 解决方案。提供您的服务器上传处理程序的 URL，select 您的文件，然后点击上传。您应该以百分比形式看到进度。

document.querySelector("#upload").addEventListener("click",function(){
  
   var oReq = new XMLHttpRequest();

   oReq.addEventListener("progress", updateProgress, false);
   oReq.addEventListener("load", transferComplete, false);
   oReq.addEventListener("error", transferFailed, false);
   oReq.addEventListener("abort", transferCanceled, false);

  
   var upload_to_URL= document.querySelector("#upload_to").value;
   oReq.open('POST', upload_to_URL , true);
  
  
   var formData = new FormData();
   formData.append("upload", file.files[0]);
   
   oReq.send(formData);

});


// progress on transfers from the server to the client (downloads)
function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total;
    // ...
    document.querySelector("#upload-progress").innerHTML= (percentComplete * 100 ) + "%"
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

function transferComplete(evt) {
    document.querySelector("#upload-progress").innerHTML= " <span style='color:green'>100%</span>";
}

function transferFailed(evt) {
  alert("An error occurred while transferring the file.");
}

function transferCanceled(evt) {
  alert("The transfer has been canceled by the user.");
}

<form id="upload-form">
  <input type="text" id="upload_to" placeholder="Upload handler URL"/><br />
  <input type="file" id="file"/>
  <input type="submit" value="upload" id="upload" />
</form>
<div id="upload-progress"></div>

在 php 中显示加载百分比文本

show loading percentage text in php

javascript

php

upload