Beispiel für die Freigabe einer Ajax-Upload-Datei-Fortschrittsleiste Codular-PHP-Tutorial-php.cn

Heutzutage erledigen die Leute gerne andere Dinge, während sie eine Webseite durchsuchen, ohne die Webseite zu verlassen, was normalerweise durch Ajax erreicht wird. Meistens verwenden die Leute jQuery, um dies zu erreichen, aber mit der Weiterentwicklung der Browser Dies ist nicht möglich. In diesem Artikel werden hauptsächlich die relevanten Informationen zum Fortschrittsbalken für Ajax-Dateien vorgestellt. Ich hoffe, dass er allen helfen kann.

Hier erfahren Sie, wie Sie eine Datei auf den Server hochladen, ohne die Seite zu verlassen. Wir verwenden denselben Backend-PHP-Code, den wir in unserem vorherigen Artikel verwendet haben. Dieses Skript lädt die Datei auf den Server hoch Gleichzeitig wird der Upload-Fortschritt angezeigt und schließlich die Linkadresse der hochgeladenen Datei zurückgegeben. In einigen Fällen möchten Sie möglicherweise die ID der hochgeladenen Datei oder andere Anwendungsinformationen zurückgeben. Hinweis: Dieser Code unterstützt keine älteren IE-Browser, bis Kann ich verwenden, wir unterstützen nur ie10+

Let's Code

Wir beginnen mit der HTML-Struktur, dann mit JavaScript, dann gebe ich Ihnen PHP-Code, diesen Ein Teil wurde aus dem vorherigen Tutorial übernommen. Es wird nicht viele Erklärungen zum PHP-Code geben.

HTML

Wir müssen nur zwei Eingabefelder verwenden, eines ist der Dateityp Datei und das andere ist nur eine Schaltfläche, damit wir es hören können angeklickt, um eine Datei-Upload-Anfrage zu senden. Wir werden auch ein p haben, mit dem wir die Breite ändern, um den Status des Uploads hervorzuheben.

sieht so aus:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS File Upload with Progress</title>
  <style>
  .container {
    width: 500px;
    margin: 0 auto;
  }
  .progress_outer {
    border: 1px solid #000;
  }
  .progress {
    width: 20%;
    background: #DEDEDE;
    height: 20px; 
  }
  </style>
</head>
<body>
  <p class=&#39;container&#39;>
    <p>
      Select File: <input type=&#39;file&#39; id=&#39;_file&#39;> <input type=&#39;button&#39; id=&#39;_submit&#39; value=&#39;Upload!&#39;>
    </p>
    <p class=&#39;progress_outer&#39;>
      <p id=&#39;_progress&#39; class=&#39;progress&#39;></p>
    </p>
  </p>
  <script src=&#39;upload.js&#39;></script>
</body>
</html>

Nach dem Login kopieren

Sie werden sehen, dass wir einen kleinen Fortschrittsbalkenstil geschrieben und unten eine Skriptdatei hinzugefügt haben, um das zu verwalten Datei-Upload und Fortschrittsbalkenanzeige.

JavaScript

Zuerst müssen wir die Tags abrufen, die wir verwenden werden, sie wurden mit IDs markiert.

var _submit = document.getElementById(&#39;_submit&#39;), 
_file = document.getElementById(&#39;_file&#39;), 
_progress = document.getElementById(&#39;_progress&#39;);

Nach dem Login kopieren

Fügen Sie im nächsten Schritt ein Klickereignis zu _submit hinzu, um die von uns ausgewählte Datei hochzuladen. Dazu verwenden wir die Methode addEventListener und lassen sie nach dem Klicken die Upload-Methode aufrufen Klicken Sie auf den Button.

_submit.addEventListener(&#39;click&#39;, upload);

Nach dem Login kopieren

Jetzt können wir mit der Bearbeitung des Uploads fortfahren, es gibt folgende Schritte:

Überprüfen Sie die Auswahl Datei
Dateidaten zum Senden dynamisch erstellen
XMLHttpRequest über js erstellen
Dateien hochladen

Überprüfen Sie die ausgewählte Datei

Unsere Dateieingabe box_file verfügt über einen Parameter „Dateien“ zum Abfragen der ausgewählten Dateiwarteschlange. Wenn Sie mehrere Parameter festlegen, Sie können mehrere Dateien auswählen. Wenn die Länge des Arrays größer als 0 ist, fahren Sie fort, andernfalls kehren Sie direkt zurück , wir können sicherstellen, dass eine Datei vorhanden ist. Bitte denken Sie daran, dass der Index des Arrays mit 0 beginnt.

Erstellen Sie die zu sendenden Dateidaten dynamisch

if(_file.files.length === 0){
  return;
}

Nach dem Login kopieren

Dazu müssen wir FormData verwenden und die Daten hinzufügen. Als nächstes können wir unsere FormData in der in Schritt 3 generierten Anfrage senden. Die von uns verwendete Append-Methode, der erste Parameter, ähnelt dem Namen Attribut des Eingabefelds und der zweite Parameter ist der Wert. Hier legen wir den Wert auf die erste Datei fest, die wir ausgewählt haben.

Wir werden dies verwenden, wenn Späteres Senden von Daten an den Server.

XMLHttpRequest per Upload-Skript erstellen

var data = new FormData();
data.append(&#39;SelectedFile&#39;, _file.files[0]);

Nach dem Login kopieren

Dieser Teil ist sehr einfach, wir erstellen ein neues

und legen einige Einstellungen fest. Zuerst ändern wir den Wert von

, um die Rückruffunktion zu definieren, wenn sich der Anforderungsstatus ändert. Diese Methode überprüft readyState, wenn sich der Status ändert, um sicherzustellen, dass der Wert unseren Wünschen entspricht – in diesem Fall ist er 4, was darauf hinweist, dass der Die Anfrage ist abgeschlossen. Im zweiten Schritt fügen wir das Fortschrittsereignis zum Upload-Attribut hinzu. Auf diese Weise können wir den Upload-Fortschritt abrufen und den Fortschrittsbalken aktualisieren 🎜>

XMLHttpRequest Wenn die Anfrage erfolgreich ist, verwenden wir try...catch, um den Prozess des Parsens des Rückgabewerts abzubrechen. Wenn das Parsen fehlschlägt, erstellen wir unser eigenes Rückgabeobjekt, damit das nächste Code meldet keinen Fehler. Sie können entscheiden, wie mit dem Rückgabewert umgegangen werden soll.onreadystatechange

Jetzt kümmern wir uns um den Fortschrittsbalken:

var request = new XMLHttpRequest();
request.onreadystatechange = function(){
  if(request.readyState == 4){
    try {
      var resp = JSON.parse(request.response);
    } catch (e){
      var resp = {
        status: &#39;error&#39;,
        data: &#39;Unknown error occurred: [&#39; + request.responseText + &#39;]&#39;
      };
    }
    console.log(resp.status + &#39;: &#39; + resp.data);
  }
};

Nach dem Login kopieren

Hier ist es etwas kompliziert, wir hören auf ein Ereignis, das uns mehr Sorgen bereitet, und der Gesamtwert, der geladen wurde Auf den Server hochgeladen, und „total“ stellt den zu sendenden Gesamtwert dar. Basierend auf diesen beiden Werten können wir einen Prozentsatz berechnen.

Hinweis: Hier werden keine Animationseffekte hinzugefügt. Sie können die Animationseffekte jedoch an Ihre Bedürfnisse anpassen.

Dateien hochladen

request.upload.addEventListener(&#39;progress&#39;, function(e){
  _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + &#39;%&#39;;
}, false);

Nach dem Login kopieren

Jetzt können wir die Anfrage senden, wir fordern sie per POST in eine Datei namens „Upload“ an .php und verwenden Sie die send()-Methode mit den Parameterdaten, damit wir die Daten senden können:

Der vollständige JavaScript-Code ist unten angegeben:

Jetzt zu PHP...

request.open(&#39;POST&#39;, &#39;upload.php&#39;);
request.send(data);

Nach dem Login kopieren

PHP

Das ist der Code, den wir verwenden, Sie werden es bemerken Einige Unterschiede bestehen hauptsächlich darin, dass wir die oberste JSON-Methode verwenden, um den Wert zurückzugeben und ihn als JSON-Format auszugeben. Dieses PHP unterscheidet sich vom Code im vorherigen Artikel. Dies bedeutet, dass diese Methode nur für PNG-Bilder gilt, die kleiner als 500 KB sind. Darüber hinaus gibt die Erfolgsmeldung den Pfad der hochgeladenen Datei zurück:

var _submit = document.getElementById(&#39;_submit&#39;), 
_file = document.getElementById(&#39;_file&#39;), 
_progress = document.getElementById(&#39;_progress&#39;);
var upload = function(){
  if(_file.files.length === 0){
    return;
  }
  var data = new FormData();
  data.append('SelectedFile', _file.files[0]);
  var request = new XMLHttpRequest();
  request.onreadystatechange = function(){
    if(request.readyState == 4){
      try {
        var resp = JSON.parse(request.response);
      } catch (e){
        var resp = {
          status: 'error',
          data: 'Unknown error occurred: [' + request.responseText + ']'
        };
      }
      console.log(resp.status + ': ' + resp.data);
    }
  };
  request.upload.addEventListener('progress', function(e){
    _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%';
  }, false);
  request.open('POST', 'upload.php');
  request.send(data);
}
_submit.addEventListener(&#39;click&#39;, upload);

Nach dem Login kopieren

<?php
// Output JSON
function outputJSON($msg, $status = &#39;error&#39;){
  header(&#39;Content-Type: application/json&#39;);
  die(json_encode(array(
    &#39;data&#39; => $msg,
    &#39;status&#39; => $status
  )));
}
// Check for errors
if($_FILES[&#39;SelectedFile&#39;][&#39;error&#39;] > 0){
  outputJSON(&#39;An error ocurred when uploading.&#39;);
}
if(!getimagesize($_FILES[&#39;SelectedFile&#39;][&#39;tmp_name&#39;])){
  outputJSON(&#39;Please ensure you are uploading an image.&#39;);
}
// Check filetype
if($_FILES[&#39;SelectedFile&#39;][&#39;type&#39;] != &#39;image/png&#39;){
  outputJSON(&#39;Unsupported filetype uploaded.&#39;);
}
// Check filesize
if($_FILES[&#39;SelectedFile&#39;][&#39;size&#39;] > 500000){
  outputJSON(&#39;File uploaded exceeds maximum upload size.&#39;);
}
// Check if the file exists
if(file_exists(&#39;upload/&#39; . $_FILES[&#39;SelectedFile&#39;][&#39;name&#39;])){
  outputJSON(&#39;File with that name already exists.&#39;);
}
// Upload file
if(!move_uploaded_file($_FILES[&#39;SelectedFile&#39;][&#39;tmp_name&#39;], &#39;upload/&#39; . $_FILES[&#39;SelectedFile&#39;][&#39;name&#39;])){
  outputJSON(&#39;Error uploading file - check destination is writeable.&#39;);
}
// Success!
outputJSON(&#39;File uploaded successfully to "&#39; . &#39;upload/&#39; . $_FILES[&#39;SelectedFile&#39;][&#39;name&#39;] . &#39;".&#39;, &#39;success&#39;);

Nach dem Login kopieren

如果将所有内容都放在一起，您应该可以将文件上传到您期望的位置，并在浏览器的控制台内成功返回。

结束语

还有一些比较容易而又有效的方式来增强用户体验.通过将文件队列的多个文件加入到FormData,可以实现多文件上传. 有一点要说明,如果你是在本地做测试,你可能没办法看到进度条逐步变化,这取决于你本地机器的上传速度,我建议在服务器上使用较大的png文件做测试.