PHP + Ajax implementiert Beispielcode für den Datei-Upload-Fortschrittsbalkeneffekt-PHP-Tutorial-php.cn

PHP + Ajax implementiert Beispielcode für den Datei-Upload-Fortschrittsbalkeneffekt

怪我咯

Freigeben： 2023-03-14 11:50:02

Original

1559 Leute haben es durchsucht

Der Fortschrittsbalken zeigt die Geschwindigkeit der Bearbeitung der Aufgabe, den Grad der Fertigstellung, die Größe der verbleibenden unvollendeten Aufgaben und die mögliche Bearbeitungszeit in Form von Bildern in Echtzeit an, wenn der Computer eine Aufgabe verarbeitet . Es wird normalerweise in Form eines rechteckigen Balkens angezeigt. In diesem Artikel werden hauptsächlich die relevanten Informationen zur Implementierung des Fortschrittsbalkens beim Hochladen von PHP-Dateien vorgestellt nutzt Ajax-Technologie und nutzt auch HTML5, Freunde in Not können es studieren.

Dieses Beispiel hat zwei Dateien:

upload_form.html:

<!DOCTYPE html>
<html>
<head>
<script>
function _(el){
  return document.getElementById(el);
}
function uploadFile(){
  var file = _("file1").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var formdata = new FormData();
  formdata.append("file1", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "file_upload_parser.php");
  ajax.send(formdata);
}

function progressHandler(event){
  _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}

function completeHandler(event){
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0;
}

function errorHandler(event){
  _("status").innerHTML = "Upload Failed";
}

function abortHandler(event){
  _("status").innerHTML = "Upload Aborted";
}
</script>
</head>
<body>
<h2>HTML5 File Upload Progress Bar Tutorial</h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
 <input type="file" name="file1" id="file1"><br>
 <input type="button" value="Upload File" onclick="uploadFile()">
 <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
 <h3 id="status"></h3>
 <p id="loaded_n_total"></p>
</form>
</body>
</html>

Nach dem Login kopieren

file_upload_parser .php:

Das obige ist der detaillierte Inhalt vonPHP + Ajax implementiert Beispielcode für den Datei-Upload-Fortschrittsbalkeneffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!