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

Question

I'm new here and I'm sorry if i have posted this in the wrong place or anything.

What i want to implement is a text which displays percentage from 1%-100% which shows how much a file has been uploaded.

Right now, It shows just "Loading.." Instead of uploading..

I'm using PHP and JS in the website. Here is the script for the "Loading" button.

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

How can i implement this? Please direct me to the path where i can implement this feature.

Answer 1

So a "without library" solution. Provide the URL of your server upload handler, select your file and click on upload. You should see the progression as a percentage.

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>

</div>