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

show loading percentage text in php

本文关键字：百分比 文本 加载 php 显示      更新时间：2024-05-30

我是新来的，如果我把这个贴错地方了，我很抱歉。

我想要实现的是一个文本，它显示从1%-100%的百分比，显示一个文件上传了多少。

现在，它只显示"加载.."而不是上传。。

我在网站上使用PHP和JS。这是"加载"按钮的脚本。

    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>
";

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

因此是一个"无库"解决方案。提供服务器上传处理程序的URL，选择文件并单击上传。您应该将进度视为百分比。

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>

相关文章：