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='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 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('_submit'), _file = document.getElementById('_file'), _progress = document.getElementById('_progress');
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('click', upload);
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; }
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('SelectedFile', _file.files[0]);
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: 'error', data: 'Unknown error occurred: [' + request.responseText + ']' }; } console.log(resp.status + ': ' + resp.data); } };
Hinweis: Hier werden keine Animationseffekte hinzugefügt. Sie können die Animationseffekte jedoch an Ihre Bedürfnisse anpassen.
Dateien hochladen
request.upload.addEventListener('progress', function(e){ _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%'; }, false);
Der vollständige JavaScript-Code ist unten angegeben:
Jetzt zu PHP...
request.open('POST', 'upload.php'); request.send(data);
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('_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);
<?php // Output JSON function outputJSON($msg, $status = 'error'){ header('Content-Type: application/json'); die(json_encode(array( 'data' => $msg, 'status' => $status ))); } // Check for errors if($_FILES['SelectedFile']['error'] > 0){ outputJSON('An error ocurred when uploading.'); } if(!getimagesize($_FILES['SelectedFile']['tmp_name'])){ outputJSON('Please ensure you are uploading an image.'); } // Check filetype if($_FILES['SelectedFile']['type'] != 'image/png'){ outputJSON('Unsupported filetype uploaded.'); } // Check filesize if($_FILES['SelectedFile']['size'] > 500000){ outputJSON('File uploaded exceeds maximum upload size.'); } // Check if the file exists if(file_exists('upload/' . $_FILES['SelectedFile']['name'])){ outputJSON('File with that name already exists.'); } // Upload file if(!move_uploaded_file($_FILES['SelectedFile']['tmp_name'], 'upload/' . $_FILES['SelectedFile']['name'])){ outputJSON('Error uploading file - check destination is writeable.'); } // Success! outputJSON('File uploaded successfully to "' . 'upload/' . $_FILES['SelectedFile']['name'] . '".', 'success');
如果将所有内容都放在一起,您应该可以将文件上传到您期望的位置,并在浏览器的控制台内成功返回。
结束语
还有一些比较容易而又有效的方式来增强用户体验.通过将文件队列的多个文件加入到FormData,可以实现多文件上传. 有一点要说明,如果你是在本地做测试,你可能没办法看到进度条逐步变化,这取决于你本地机器的上传速度,我建议在服务器上使用较大的png文件做测试.
相关推荐:
Das obige ist der detaillierte Inhalt vonBeispiel für die Freigabe einer Ajax-Upload-Datei-Fortschrittsleiste Codular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!