Heim > Artikel > Backend-Entwicklung > PHP + Ajax implementiert Beispielcode für den Datei-Upload-Fortschrittsbalkeneffekt

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

怪我咯Original: 2017-07-23 11:00:221531Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Fortschrittsbalken durch PHP-Code implementiertNächster Artikel：Fortschrittsbalken durch PHP-Code implementiert

In Verbindung stehende Artikel

Mehr sehen