Ajax-Upload-Datei-Fortschrittsbalken Codular-js-Tutorial-php.cn

Ajax-Upload-Datei-Fortschrittsbalken Codular

亚连

Freigeben： 2018-05-22 14:49:10

Original

1414 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Informationen zum Ajax-Upload-Datei-Fortschrittsbalken Codular vorgestellt. Freunde, die sie benötigen, können darauf verweisen

Heute möchten die Leute andere Dinge tun, während sie im Internet surfen, ohne die Webseite zu verlassen. Normalerweise wird dies über Ajax erreicht, aber mit der Weiterentwicklung der Browser ist dies nicht mehr erforderlich. Hier stellen wir vor, wie man Dateien auf den Server hochlädt, ohne die Seite zu verlassen , Wir werden den gleichen Backend-PHP-Code verwenden, den wir in unserem vorherigen Artikel verwendet haben. Das Skript lädt die Datei auf den Server hoch, zeigt den Upload-Fortschritt an und gibt schließlich die Linkadresse der hochgeladenen Datei zurück Gibt die ID der hochgeladenen Datei oder andere Anwendungsinformationen zurück. Hinweis: Dieser Code unterstützt keine älteren IE-Browser. Durch Kann ich nur IE10+ unterstützen

Let's Code

Wir beginnen mit der HTML-Struktur, dann mit dem JavaScript und dann stelle ich Ihnen den PHP-Code zur Verfügung. Dieser Teil ist 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.

Wie unten gezeigt:

<!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 Hochladen der Datei und die Anzeige des Fortschrittsbalkens zu verwalten.

JavaScript

Zuerst müssen wir die Tags abrufen, die wir verwenden werden, sie sind bereits 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

Als nächstes fügen Sie ein Klickereignis zu _submit hinzu , um die Datei unserer Wahl hochzuladen. Dazu verwenden wir die Methode addEventListener und lassen sie nach dem Klicken auf die Schaltfläche die Upload-Methode aufrufen.

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

Nach dem Login kopieren

Jetzt können wir mit dem Upload fortfahren die folgenden Schritte:

Überprüfen Sie die ausgewählte Datei
Dynamisches Erstellen der zu sendenden Dateidaten
XMLHttpRequest über js erstellen
Datei hochladen

Überprüfen Sie die ausgewählte Datei

Unsere Datei Das Eingabefeld _file verfügt über eine Abfrage. Wählen Sie den Dateiwarteschlangenparameter aus. Wenn Sie den Parameter „Mehrfach“ festlegen, können Sie eine einfache Überprüfung und Beurteilung durchführen. Wenn die Array-Länge größer als 0 ist, fahren Sie fort, andernfalls kehren Sie direkt zurück 🎜>

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

Nach dem Login kopieren

Jetzt können wir sicherstellen, dass eine Datei ausgewählt ist. Wir gehen davon aus, dass eine Datei vorhanden ist. Bitte denken Sie daran, dass der Index des Arrays mit 0 beginnt.

Erstellen Sie dynamisch die Zu sendende Dateidaten

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 Append-Methode, die wir verwenden , der erste Parameter ähnelt dem Namensattribut des Eingabefelds. Der zweite Parameter ist der Wert. Hier legen wir den Wert auf die erste von uns ausgewählte Datei fest.

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

Nach dem Login kopieren

Wir werden dies beim Senden von Daten verwenden später auf dem Server.

XMLHttpRequest per Upload-Skript erstellen

Dieser Teil ist sehr einfach, wir erstellen ein neues

und legen einige Einstellungen fest. Zuerst ändern wir den Wert von XMLHttpRequest, 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. onreadystatechange

Im zweiten Schritt fügen wir das Fortschrittsereignis zum Upload-Attribut hinzu. Auf diese Weise können wir den Upload-Fortschritt abrufen und ihn zum Aktualisieren des Fortschrittsbalkens verwenden Wenn die Anfrage erfolgreich ist, verwenden wir try...catch, um den Prozess der Analyse des Rückgabewerts abzubrechen. Wenn die Analyse fehlschlägt, erstellen wir unser eigenes Rückgabeobjekt, sodass der nachfolgende Code keinen Fehler meldet. Sie können entscheiden, wie Behandeln Sie den Rückgabewert.

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

Das ist etwas kompliziert Ein Ereignis hat zwei Eigenschaften, die uns am meisten interessieren: „Loaded“ und „Total Loaded“ stellen den Wert dar, der auf den Server hochgeladen wurde, und „Total“ stellt den Gesamtwert dar, der auf dieser Grundlage gesendet werden soll Zwei Werte zum Festlegen der Breite des Fortschrittsbalkens.

Hinweis: Hier werden keine Animationseffekte hinzugefügt. Sie können den Animationseffekt jedoch entsprechend Ihren Anforderungen anpassen.

Hochladen Datei

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

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

Der vollständige JavaScript-Code ist unten angegeben:

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

Nach dem Login kopieren

Jetzt zu PHP...

PHP

Das ist der Code Wir verwenden, Sie werden einige Unterschiede bemerken, hauptsächlich, dass wir die oberste JSON-Methode verwenden, um den Wert zurückzugeben und ihn im JSON-Format auszugeben. Dies ist derselbe PHP-Code wie im vorherigen Artikel, was bedeutet, dass diese Methode nur auf PNG-Bilder anwendbar ist weniger als 500 KB. 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

Das Obige habe ich für alle zusammengestellt, ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

jQuery Validator-Methode zur Überprüfung der Ajax-Formularübermittlung und Ajax-Parameterübergabemethode (grafisches Tutorial)

Beispiele für asynchrone Ajax-Anfragetechnologie erklärt

Das Prinzip der domänenübergreifenden Ajax-Anfrage (grafisches Tutorial)

Das obige ist der detaillierte Inhalt vonAjax-Upload-Datei-Fortschrittsbalken Codular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!