Question

我是新来的，如果我把它发布在错误的地方或任何地方，我很抱歉。

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

现在，它只显示＆＃34;正在加载..＆＃34;而不是上传..

我在网站上使用PHP和JS。这是＆＃34; Loading＆＃34;的脚本。按钮。

    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

所以＃34;没有图书馆＆＃34;解。提供服务器上传处理程序的URL，选择您的文件并单击上传。您应该以百分比的形式看到进展。

＆＃13;

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.");
}

＆＃13;

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

＆＃13;

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

1 个答案: