Web-Frontend
js-Tutorial
So implementieren Sie einen Fortschrittsbalken für das Hochladen von Dateien mit Ajax Codular
So implementieren Sie einen Fortschrittsbalken für das Hochladen von Dateien mit Ajax Codular
Dieses Mal zeige ich Ihnen, wie Sie Codular als Fortschrittsbalken für das Hochladen von Dateien mit Ajax implementieren Fall, werfen wir einen Blick darauf. 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 von Browser, die dies nicht tun müssen. Hier erfahren Sie, wie Sie eine Datei auf einen Server hochladen, ohne die Seite zu verlassen. Wir werden denselben Backend-PHP-Code verwenden, den wir in unserem vorherigen Artikel verwendet haben Senden Sie die Datei an den Server, zeigen Sie den Upload-Fortschritt an und geben Sie schließlich die Linkadresse der hochgeladenen Datei zurück. 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 Dateien
dh Browser, von Can I use unterstützen wir nur ie10+Let's Code
Wir beginnen mit der HTML-Struktur, dann mit JavaScript, ich werde es dann tun stellen Ihnen den PHP-Code zur Verfügung, der aus dem vorherigen Tutorial übernommen wurde – es wird nicht viele Erklärungen zum PHP-Code geben.
HTMLWir 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:
Sie werden sehen, dass wir einen kleinen Fortschrittsbalkenstil geschrieben und unten eine Skriptdatei hinzugefügt haben, umdie Datei zu verarbeiten
hochzuladen und die Fortschrittsbalkenanzeige.<!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>Zuerst müssen wir die Tags abrufen, die wir verwenden werden, sie sind bereits mit IDs markiert.
Down Fügen Sie im ersten Schritt ein Click-Ereignis zu _submit hinzu, um die von uns ausgewählte Datei hochzuladen. Dazu verwenden wir die Methode addEventListener und lassen sie nach dem Klicken auf die Schaltfläche die Upload-Methode aufrufen >Jetzt können wir den Upload weiter verarbeiten, es gibt folgende Schritte:
var _submit = document.getElementById('_submit'),
_file = document.getElementById('_file'),
_progress = document.getElementById('_progress');_submit.addEventListener('click', upload);- Dynamisch erstellen Zu sendende Dateidaten
- XMLHttpRequest über js erstellen
- Datei hochladen
- Überprüfen Sie die ausgewählte Datei Unser Dateieingabefeld _file verfügt über einen Parameter „Dateien“ zum Abfragen der ausgewählten Dateiwarteschlange. Wenn Sie den Parameter „Mehrfach“ festlegen, können Sie mehrere Dateien auswählen. Wir führen eine einfache Prüfung durch und beurteilen. Wenn die Array-Länge größer als 0 ist, fahren Sie fort, andernfalls kehren Sie direkt zurück.
Da wir nun sicherstellen können, dass eine Datei ausgewählt ist, gehen wir davon aus, dass eine Datei vorhanden ist. Denken Sie an den Index des Arrays beginnt mit 0.
Dynamisch erstellte Dateidaten, die gesendet werden sollen
if(_file.files.length === 0){
return;
}Dazu müssen wir FormData verwenden und die Daten hinzufügen. Als nächstes können wir senden unsere FormData in der in Schritt 3 generierten Anfrage. Wir verwenden die append-Methode, der erste Parameter ähnelt dem Namensattribut des Eingabefelds und der zweite Parameter ist der Wert. Hier legen wir den Wert auf die erste von uns ausgewählte Datei fest.
Wenn wir es später angeben Wir werden es verwenden, wenn der Server Daten sendet
XMLHttpRequest per Upload-Skript erstellen
var data = new FormData();
data.append('SelectedFile', _file.files[0]);Dieser Teil ist Ganz 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 angeforderte Status ändert. Diese Methode überprüft readyState, wenn sich der Status ändert, um sicherzustellen, dass der Wert unseren Wünschen entspricht – in diesem Fall ist 4, stellt den Abschluss der Anfrage dar. Im zweiten Schritt fügen wir das Fortschrittsereignis zum Upload-Attribut hinzu. Auf diese Weise können wir den Upload-Fortschritt abrufen, um den Fortschrittsbalken zu aktualisieren 🎜>
Wenn die Anfrage erfolgreich ist, verwenden wir schließlich try...catch, um den Prozess des Parsens des Rückgabewerts zu umschließen. Wenn das Parsen fehlschlägt, erstellen wir unser eigenes Rückgabeobjekt, sodass der nachfolgende Code kein Problem meldet Fehler. Sie können entscheiden, wie mit dem Rückgabewert umgegangen werden soll, hier verwenden wir ihn einfach als Ausgabe an die Konsole.XMLHttpRequestonreadystatechangeJetzt kümmern wir uns um den Fortschrittsbalken:
request.upload.addEventListener('progress', function(e){
_progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%';
}, false);这里有一点点复杂,我们监听一个事件,该事件对象有两个我们比较关注的属性,loaded和total.loaded表示已经上传到服务器端的数值,total表示要发送的总数值,我们可以根据这两个值计算一个百分比,来设置进度条的宽度.
Note: 这里没有加入任何动画特效,但你可以根据需要自定义动画效果.
上传文件
现在我们可以发送请求，我们将通过POST请求到一个名为upload.php的文件，并使用send（）方法，参数为data，这样我们就可以发送数据:
request.open('POST', 'upload.php');
request.send(data);下面给出完整的JavaScript代码:
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...
PHP
这是我们使用的代码,你将注意到一些区别,主要是我们用最上面的JSON方法来返回值都作为JSON格式输出.这个PHP与之前文章中的代码相同,这也就意味着该方法只适用于小于500Kb的PNG图片.此外,成功信息将返回已上传文件的路径:
<?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文件做测试.
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Fortschrittsbalken für das Hochladen von Dateien mit Ajax Codular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Können Dateien im Tmp-Format gelöscht werden?
Feb 24, 2024 pm 04:33 PM
TMP-Formatdateien sind ein temporäres Dateiformat, das normalerweise von einem Computersystem oder Programm während der Ausführung generiert wird. Der Zweck dieser Dateien besteht darin, temporäre Daten zu speichern, um die ordnungsgemäße Ausführung des Programms zu unterstützen oder die Leistung zu verbessern. Sobald die Programmausführung abgeschlossen ist oder der Computer neu gestartet wird, werden diese tmp-Dateien häufig nicht mehr benötigt. Daher sind Dateien im Tmp-Format grundsätzlich löschbar. Darüber hinaus kann das Löschen dieser tmp-Dateien Festplattenspeicher freigeben und den normalen Betrieb des Computers gewährleisten. Bevor wir jedoch Dateien im Tmp-Format löschen, müssen wir dies tun
Was tun, wenn der Fehlercode 0x80004005 angezeigt wird? Der Editor zeigt Ihnen, wie Sie den Fehlercode 0x80004005 beheben können.
Mar 21, 2024 pm 09:17 PM
Wenn Sie einen Ordner auf Ihrem Computer löschen oder dekomprimieren, wird manchmal das Dialogfeld „Fehler 0x80004005: Nicht spezifizierter Fehler“ angezeigt. Wie können Sie diese Situation lösen? Es gibt tatsächlich viele Gründe, warum der Fehlercode 0x80004005 angezeigt wird, aber die meisten davon werden durch Viren verursacht. Wir können die DLL erneut registrieren, um das Problem zu lösen. Nachfolgend erklärt Ihnen der Editor die Erfahrung beim Umgang mit dem Fehlercode 0x80004005 . Einige Benutzer erhalten bei der Verwendung ihres Computers den Fehlercode 0X80004005. Der Fehler 0x80004005 wird hauptsächlich dadurch verursacht, dass der Computer bestimmte Dynamic Link Library-Dateien nicht korrekt registriert oder dass eine Firewall keine HTTPS-Verbindungen zwischen dem Computer und dem Internet zulässt. Wie wäre es also?
Wie übertrage ich Dateien von Quark Cloud Disk auf Baidu Cloud Disk?
Mar 14, 2024 pm 02:07 PM
Quark Netdisk und Baidu Netdisk sind derzeit die am häufigsten verwendete Netdisk-Software zum Speichern von Dateien. Wenn Sie die Dateien in Quark Netdisk auf Baidu Netdisk speichern möchten, wie gehen Sie vor? In dieser Ausgabe hat der Herausgeber die Tutorial-Schritte zum Übertragen von Dateien vom Quark Network Disk-Computer auf die Baidu Network Disk zusammengestellt. Werfen wir einen Blick auf die Bedienung. Wie speichere ich Quark-Netzwerkfestplattendateien auf einer Baidu-Netzwerkfestplatte? Um Dateien von Quark Network Disk auf Baidu Network Disk zu übertragen, müssen Sie zunächst die erforderlichen Dateien von Quark Network Disk herunterladen, dann den Zielordner im Baidu Network Disk-Client auswählen und ihn öffnen. Ziehen Sie dann die von Quark Cloud Disk heruntergeladenen Dateien per Drag & Drop in den vom Baidu Cloud Disk-Client geöffneten Ordner oder verwenden Sie die Upload-Funktion, um die Dateien zu Baidu Cloud Disk hinzuzufügen. Überprüfen Sie nach Abschluss des Uploads unbedingt, ob die Datei erfolgreich in Baidu Cloud Disk übertragen wurde. Das ist es
Unterschiedliche Verwendung von Schrägstrichen und Backslashes in Dateipfaden
Feb 26, 2024 pm 04:36 PM
Ein Dateipfad ist eine Zeichenfolge, die vom Betriebssystem verwendet wird, um eine Datei oder einen Ordner zu identifizieren und zu finden. In Dateipfaden gibt es zwei gängige Symbole zur Trennung von Pfaden, nämlich den Schrägstrich (/) und den Backslash (). Diese beiden Symbole haben in verschiedenen Betriebssystemen unterschiedliche Verwendungen und Bedeutungen. Der Schrägstrich (/) ist ein häufig verwendetes Pfadtrennzeichen in Unix- und Linux-Systemen. Auf diesen Systemen beginnen Dateipfade im Stammverzeichnis (/) und werden durch Schrägstriche zwischen den einzelnen Verzeichnissen getrennt. Zum Beispiel der Pfad /home/user/Docume
Was ist die Datei hiberfil.sys? Kann hiberfil.sys gelöscht werden?
Mar 15, 2024 am 09:49 AM
Vor kurzem haben viele Internetnutzer den Herausgeber gefragt: Was ist die Datei hiberfil.sys? Kann hiberfil.sys viel Speicherplatz auf Laufwerk C beanspruchen und gelöscht werden? Der Editor kann Ihnen mitteilen, dass die Datei hiberfil.sys gelöscht werden kann. Werfen wir einen Blick auf die Details unten. hiberfil.sys ist eine versteckte Datei im Windows-System und auch eine System-Ruhezustandsdatei. Es wird normalerweise im Stammverzeichnis des Laufwerks C gespeichert und seine Größe entspricht der Größe des installierten Speichers des Systems. Diese Datei wird verwendet, wenn sich der Computer im Ruhezustand befindet, und enthält die Speicherdaten des aktuellen Systems, damit dieser bei der Wiederherstellung schnell wieder in den vorherigen Zustand versetzt werden kann. Da seine Größe der Speicherkapazität entspricht, nimmt er möglicherweise mehr Festplattenspeicher ein. hiber
Einfache Schritte zum Hochladen Ihrer eigenen Musik auf Kugou
Mar 25, 2024 pm 10:56 PM
1. Öffnen Sie Kugou Music und klicken Sie auf Ihr Profilbild. 2. Klicken Sie auf das Symbolset in der oberen rechten Ecke. 3. Klicken Sie auf [Musikwerke hochladen]. 4. Klicken Sie auf [Werke hochladen]. 5. Wählen Sie das Lied aus und klicken Sie auf [Weiter]. 6. Klicken Sie abschließend auf [Hochladen].
Ausführliche Erläuterung der Rolle von .ibd-Dateien in MySQL und der damit verbundenen Vorsichtsmaßnahmen
Mar 15, 2024 am 08:00 AM
Ausführliche Erläuterung der Rolle von .ibd-Dateien in MySQL und der damit verbundenen Vorsichtsmaßnahmen. MySQL ist ein beliebtes relationales Datenbankverwaltungssystem, und die Daten in der Datenbank werden in verschiedenen Dateien gespeichert. Unter diesen ist die .ibd-Datei eine Datendatei in der InnoDB-Speicher-Engine, die zum Speichern von Daten und Indizes in Tabellen verwendet wird. Dieser Artikel bietet eine detaillierte Analyse der Rolle der .ibd-Datei in MySQL und liefert relevante Codebeispiele, um den Lesern ein besseres Verständnis zu erleichtern. 1. Die Rolle von .ibd-Dateien: Speichern von Daten: .ibd-Dateien sind InnoDB-Speicher
PHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine
Jun 02, 2024 pm 08:39 PM
Erstellen Sie eine Engine für Autovervollständigungsvorschläge mit PHP und Ajax: Serverseitiges Skript: Verarbeitet Ajax-Anfragen und gibt Vorschläge zurück (autocomplete.php). Client-Skript: Ajax-Anfrage senden und Vorschläge anzeigen (autocomplete.js). Praktischer Fall: Fügen Sie ein Skript in die HTML-Seite ein und geben Sie die Kennung des Sucheingabeelements an.
