Fortschrittsbalken beim Hochladen von Dateien mit JS anzeigen
Dieses Mal bringe ich Ihnen den Fortschrittsbalken beim Hochladen von Dateien mit JS. Was sind die Vorsichtsmaßnahmen für die Anzeige des Fortschrittsbalkens beim Hochladen von Dateien mit JS? Fall. Schauen wir uns das einmal an.
Ändern Sie die erforderliche Größe in php.ini:
upload_max_filesize = 8M
post_max_size = 10M
<!DOCTYPE html>
<html>
<head>
<title>原生JS大文件显示进度条</title>
<meta charset="UTF-8">
<style type="text/css">
#parent{position: relative;width: 500px;height:20px;border:1px solid #ccc;display: none;border-radius:20px}
#child{position: absolute;width:0%;height:20px;background: #5FB878;display: none;line-height: 20px;color: #ffffff;font-size: 12px;border-radius:20px}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="" method="post">
<p id="parent">
<p id="child"></p>
</p>
<p>上传文件:<input type="file" name="file"></p>
<p><input type="submit" value="提交" id="submit"></p>
</form>
<script type="text/javascript">
var oForm = document.getElementsByTagName('form')[0];
var oSubmit = $('submit');
//如果多个人同时提交这个表单的时候，由于是异步的请求，互不影响
oSubmit.onclick = function(){
try{
var xhr = new XMLHttpRequest();
}catch(e){
var xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
xhr.upload.onprogress = function(e){
var ev = e || window.event;
var percent = Math.floor((ev.loaded / ev.total)*100);
// console.log(percent);
//将百分比显示到进度条
$('parent').style.display = 'block';
$('child').style.display = 'block';
//将上传进度的百分比显示到child里面
$('child').style.width = percent+'%';
$('child').style.textAlign = 'center';
$('child').innerHTML = percent+'%';
//判断如果百分比到达100%时候，隐藏掉
if(percent==100){
$('parent').style.display = 'none';
$('child').style.display = 'none';
}
}
xhr.open('post','progress.php',true);
var form = new FormData(oForm);
xhr.send(form);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
eval("var obj ="+xhr.responseText);
if(obj.status){
alert('上传成功');
}else{
alert('上传失败');
}
}
}
//阻止表单提交
return false;
}
</script>
</body>
</html><?php
//开始上传
//注意：文件是windows系统的文件，采用的gbk编码，php文件使用的是utf-8编码
//我们不能直接修改文件的编码，只能临时修改一下php的编码
$dst_file = $_FILES['file']['name'];
$dst_file = iconv('utf-8', 'gbk', $dst_file);
if(move_uploaded_file($_FILES['file']['tmp_name'],$dst_file)){
$data['status'] = 1;
}else{
$data['status'] = 0;
}
echo json_encode($data);Das obige ist der detaillierte Inhalt vonFortschrittsbalken beim Hochladen von Dateien mit JS anzeigen. 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
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
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
1386
52
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
Dec 17, 2023 pm 05:30 PM
WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie
Gründe und Lösungen für die Sperrung des Desktop-Layouts
Feb 19, 2024 pm 06:08 PM
Was passiert, wenn das Desktop-Layout gesperrt ist? Bei der Verwendung des Computers kann es manchmal vorkommen, dass das Desktop-Layout gesperrt ist. Dieses Problem bedeutet, dass wir die Position von Desktop-Symbolen nicht frei anpassen oder den Desktop-Hintergrund ändern können. Was genau passiert also, wenn es heißt, dass das Desktop-Layout gesperrt ist? 1. Das Desktop-Layout und die Sperrfunktionen verstehen. Zunächst müssen wir die beiden Konzepte Desktop-Layout und Desktop-Sperre verstehen. Unter Desktop-Layout versteht man die Anordnung verschiedener Elemente auf dem Desktop, darunter Verknüpfungen, Ordner, Widgets usw. wir können frei sein
So stellen Sie eine Remotedesktopverbindung her und zeigen die Taskleiste des anderen Teilnehmers an
Jan 03, 2024 pm 12:49 PM
Es gibt viele Benutzer, die die Remotedesktopverbindung verwenden. Bei der Verwendung werden einige kleinere Probleme auftreten, z. B. dass die Taskleiste des anderen Teilnehmers nicht angezeigt wird. Tatsächlich liegt das Problem an den Einstellungen des anderen Teilnehmers Lösungen unten. So zeigen Sie die Taskleiste des anderen Teilnehmers während einer Remotedesktopverbindung an: 1. Klicken Sie zunächst auf „Einstellungen“. 2. Öffnen Sie anschließend „Personalisierung“. 3. Wählen Sie dann links „Taskleiste“ aus. 4. Deaktivieren Sie die Option „Taskleiste ausblenden“ im Bild.
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest
Wie überprüfe ich das aktuelle Verzeichnis unter Linux?
Feb 23, 2024 pm 05:54 PM
In Linux-Systemen können Sie den Befehl pwd verwenden, um den aktuellen Pfad anzuzeigen. Der Befehl pwd ist die Abkürzung für PrintWorkingDirectory und wird verwendet, um den Pfad des aktuellen Arbeitsverzeichnisses anzuzeigen. Geben Sie im Terminal den folgenden Befehl ein, um den aktuellen Pfad anzuzeigen: pwd Nach der Ausführung dieses Befehls zeigt das Terminal den vollständigen Pfad des aktuellen Arbeitsverzeichnisses an, z. B.: /home/user/Documents. Darüber hinaus können Sie einige andere Optionen verwenden, um die Funktionalität des Befehls pwd zu erweitern. Beispielsweise kann die Option -P angezeigt werden
Wie zeige ich den WLAN-Passwort-QR-Code an? Es wird empfohlen, das WLAN-Passwort in 3 Sekunden auf WeChat zu scannen.
Feb 20, 2024 pm 01:42 PM
Sie müssen das WLAN-Passwort nicht oft eingeben, daher ist es normal, dass Sie es vergessen. Heute zeige ich Ihnen, wie Sie das Passwort Ihres eigenen WLANs in 3 Sekunden finden. Um das WLAN-Passwort zu überprüfen, scannen Sie es mit WeChat. Die Voraussetzung dieser Methode ist: Es muss ein Mobiltelefon vorhanden sein, das eine Verbindung zu WLAN herstellen kann. Okay, beginnen wir mit dem Tutorial: Schritt 1. Wir betreten das Telefon, ziehen es von der Oberseite nach unten, rufen die Statusleiste und das WLAN-Symbol auf. Schritt 2: Drücken Sie lange auf das WLAN-Symbol, um die WLAN-Einstellungen aufzurufen Klicken Sie auf das WLAN-Symbol. Klicken Sie auf „Verbunden“. Geben Sie den WLAN-Namen Ihres Zuhauses ein. Anschließend wird ein QR-Code zum Teilen des WLAN-Passworts angezeigt. Schritt 5: , drücken Sie lange auf das WeChat-Symbol auf dem Desktop und klicken Sie auf Scannen
Samsung wird Displays für Microsofts MR-Headsets bereitstellen, und die Geräte sollen leichter sein und klarere Displays haben
Aug 10, 2024 pm 09:45 PM
Kürzlich haben Samsung Display und Microsoft eine wichtige Kooperationsvereinbarung unterzeichnet. Gemäß der Vereinbarung wird Samsung Display Hunderttausende OLEDoS-Panels für am Kopf montierte Mixed-Reality-Geräte (MR) entwickeln und liefern. Microsoft entwickelt voraussichtlich ein MR-Gerät für Multimedia-Inhalte wie Spiele und Filme Die Markteinführung erfolgt nach Fertigstellung der OLEDoS-Spezifikationen, dient hauptsächlich dem kommerziellen Bereich und wird voraussichtlich bereits 2026 ausgeliefert. OLEDoS-Technologie (OLED on Silicon) OLEDoS ist eine neue Anzeigetechnologie, bei der OLED auf einem Siliziumsubstrat aufgebracht wird. Im Vergleich zu herkömmlichen Glassubstraten ist es dünner und weist höhere Pixel auf. OLEDoS-Display und normales Display
win7 kann nicht normal heruntergefahren werden und zeigt weiterhin an, dass es heruntergefahren wird
Jan 06, 2024 pm 07:41 PM
Das Win7-System ist ein ausgezeichnetes System, das den meisten Computerbenutzern gefällt. In letzter Zeit haben jedoch viele Benutzer von Win7-Systemen berichtet, dass ihre Computer nicht heruntergefahren werden können, und zeigen weiterhin an, dass sie heruntergefahren werden! Heute bietet Ihnen der Editor eine Lösung für das Problem, dass Win7 nicht heruntergefahren werden kann. Lösungen für das Problem, dass Windows 7 nicht heruntergefahren werden kann und weiterhin anzeigt, dass es heruntergefahren wird: verschiedene Gründe und Lösungen: Methode 1: 1. Überprüfen Sie zunächst, ob nicht geschlossene Software vorhanden ist, beenden Sie diese und versuchen Sie dann, sie herunterzufahren 2. Nachdem Sie auf den Befehl zum Herunterfahren geklickt haben, besteht das Problem weiterhin. Wenn Sie den Computer nicht herunterfahren können, liegt dies höchstwahrscheinlich an einer Störung durch Prozesse im Computer. Klicken Sie mit der rechten Maustaste auf „Task-Manager“. " und wählen Sie „Prozesse“. 3. Sie können während des Vorgangs alles beobachten, was auf dem Computer läuft.
