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='container'> <p> Select File: <input type='file' id='_file'> <input type='button' id='_submit' value='Upload!'> </p> <p class='progress_outer'> <p id='_progress' class='progress'></p> </p> </p> <script src='upload.js'></script> </body> </html>
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('_submit'), _file = document.getElementById('_file'), _progress = document.getElementById('_progress');
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('click', upload);
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; }
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('SelectedFile', _file.files[0]);
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
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: 'error', data: 'Unknown error occurred: [' + request.responseText + ']' }; } console.log(resp.status + ': ' + resp.data); } };
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('progress', function(e){ _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%'; }, false);
request.open('POST', 'upload.php'); request.send(data);
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('_submit'), _file = document.getElementById('_file'), _progress = document.getElementById('_progress'); 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('click', upload);
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!