Web-Frontend
js-Tutorial
Anzeige des Fortschrittsbalkens für das Hochladen von HTML5+Ajax-Dateien (detaillierte Grafik- und Texterklärung)
Anzeige des Fortschrittsbalkens für das Hochladen von HTML5+Ajax-Dateien (detaillierte Grafik- und Texterklärung)
Dieses Mal bringe ich Ihnen HTML5+AjaxDatei-UploadFortschrittsbalkenAnzeige (detaillierte grafische und Texterklärung), HTML5+Ajax-Datei-Upload-Fortschrittsbalken-AnzeigeNotizenWas sind das? Hier sind praktische Fälle.
Ursprünglich hatte ich geplant, das JQuery-Plug-In für den asynchronen Datei-Upload zu verwenden, z. B. uploadfy, aber es benötigt zusätzliche Unterstützung. Einige Leute verwenden iframe, um den asynchronen Upload-Mechanismus zu imitieren, was sich umständlich anfühlt. Da das Projekt keine Browser niedrigerer Versionen berücksichtigt, wurde beschlossen, HTML5 für die Implementierung zu verwenden. Das Folgende ist nur eine einfache Demo. Sie müssen den spezifischen Stil selbst erstellen.
Der Hintergrund basiert je nach Projekt auf strut2 für die Dateiverarbeitung. Achten Sie nur darauf, Dateigrößenbeschränkungen festzulegen.
<%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<title>使用XMLHttpRequest上传文件</title>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
//监听选择文件信息
function fileSelected() {
//HTML5文件API操作
var file = document.getElementById('fileName').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
//上传文件
function uploadFile() {
var fd = new FormData();
//关联表单数据,可以是自定义参数
fd.append("name", document.getElementById('name').value);
fd.append("fileName", document.getElementById('fileName').files[0]);
//监听事件
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
//发送文件和表单自定义参数
xhr.open("POST", "<%=path%>/user/uploadifyTest_doUpload");
xhr.send(fd);
}
//取消上传
function cancleUploadFile(){
xhr.abort();
}
//上传进度
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
//上传成功响应
function uploadComplete(evt) {
//服务断接收完文件返回的结果
alert(evt.target.responseText);
}
//上传失败
function uploadFailed(evt) {
alert("上传失败");
}
//取消上传
function uploadCanceled(evt) {
alert("您取消了本次上传.");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
<p class="row">
<label for="fileToUpload">选择文件</label>
<input type="file" name="fileName" id="fileName" onchange="fileSelected();"/>
</p>
<p id="fileName"></p>
<p id="fileSize"></p>
<p id="fileType"></p>
<p class="row">
上传者：<input type="text" name="name" id="name"/>
<input type="button" onclick="uploadFile()" value="上传" />
<input type="button" onclick="cancleUploadFile()" value="取消" />
</p>
<p id="progressNumber"></p>
</form>
</body>
</html>fd.append("name", document.getElementById('name').value);fd.append("fileName ", document.getElementById('fileName').files[0]);
Diese beiden Sätze binden Daten an das Formular. Da HTML5 das Hochladen mehrerer Dateien unterstützt, gibt
document.getElementById('fileName').files ein Array zurück. Es gibt hier nur eine Datei, also entfernen Sie das Element mit Index 0.
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);Verknüpfen Sie hier Fortschritts-, Upload-, Fehler- und Unterbrechungsereignisse, um eine gewisse Interaktion zu ermöglichen. Der Dateifortschritt wird im Fortschrittsrückruf angezeigt. Fügen Sie dann den Hintergrundcode und die Aktionskonfiguration UploadifyTestAction.java ein.
package com.bjhit.eranges.actions.test;
import java.io.File;
import com.opensymphony.xwork2.ActionSupport;
public class UploadifyTestAction extends ActionSupport {
private static final long serialVersionUID = 837481714629791752L;
private File fileName;
private String name;
private String responseInfo;
public String doUpload() throws Exception {
System.out.println(name);
File myFile = fileName;
System.out.println(myFile.getName());
responseInfo = "上传成功!";
return "doUpload";
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public File getFileName() {
return fileName;
}
public void setFileName(File fileName) {
this.fileName = fileName;
}
public String getResponseInfo() {
return responseInfo;
}
public void setResponseInfo(String responseInfo) {
this.responseInfo = responseInfo;
}
}<!-- 文件上传例子 -->
<action name="uploadifyTest_*" class="com.bjhit.eranges.actions.test.UploadifyTestAction" method="{1}">
<result name="doUpload" type="json">
<param name="includeProperties">responseInfo</param>
<param name="excludeNullProperties">true</param>
</result>
</action>Ajax-Methode zum Lesen von JSON-Daten
Konstruieren von AJAX zur Implementierung der Formular-JSON-Konvertierungsmethode
Das obige ist der detaillierte Inhalt vonAnzeige des Fortschrittsbalkens für das Hochladen von HTML5+Ajax-Dateien (detaillierte Grafik- und Texterklärung). 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
So entfernen Sie Nachrichten und Trendinhalte aus der Windows 11-Suche
Oct 16, 2023 pm 08:13 PM
Wenn Sie in Windows 11 auf das Suchfeld klicken, wird die Suchoberfläche automatisch erweitert. Es zeigt links eine Liste der zuletzt verwendeten Programme und rechts Webinhalte an. Dort zeigt Microsoft Neuigkeiten und Trendinhalte an. Der heutige Check bewirbt Bings neue Bildgenerierungsfunktion DALL-E3, das Angebot „Chat Dragons with Bing“, weitere Informationen zu Drachen, Top-News aus dem Web-Bereich, Spielempfehlungen und den Trending Search-Bereich. Die gesamte Liste der Elemente ist unabhängig von Ihrer Aktivität auf Ihrem Computer. Während einige Benutzer die Möglichkeit, Nachrichten anzuzeigen, zu schätzen wissen, ist all dies anderswo in Hülle und Fülle verfügbar. Andere können es direkt oder indirekt als Verkaufsförderung oder sogar als Werbung einstufen. Microsoft nutzt Schnittstellen, um eigene Inhalte zu bewerben,
Der Standby-Modus von iOS 17 verwandelt ein ladendes iPhone in einen Home-Hub
Jun 06, 2023 am 08:20 AM
Mit iOS 17 führt Apple den Standby-Modus ein, ein neues Anzeigeerlebnis zum Laden von iPhones in horizontaler Ausrichtung. In dieser Position kann das iPhone eine Reihe von Vollbild-Widgets anzeigen und wird so zu einem nützlichen Home-Hub. Der Standby-Modus wird automatisch aktiviert, wenn ein iPhone mit iOS 17 horizontal auf dem Ladegerät platziert wird. Sie können Uhrzeit, Wetter, Kalender, Musiksteuerung, Fotos und mehr anzeigen. Sie können durch die verfügbaren Standby-Optionen nach links oder rechts wischen und dann zum Anpassen lange drücken oder nach oben/unten wischen. Sie können beispielsweise zwischen analoger Ansicht, digitaler Ansicht, Blasenschrift und Tageslichtansicht wählen, wobei sich die Hintergrundfarbe im Laufe der Zeit je nach Zeit ändert. Es gibt einige Optionen
Windows 11-Benutzerhandbuch: So deaktivieren Sie Werbe-Popups
Sep 22, 2023 pm 07:21 PM
Das Betriebssystem Windows 11 von Microsoft zeigt mithilfe des Benachrichtigungssystems möglicherweise regelmäßig Vorschläge als Popups auf Ihrem Computer an. Das Vorschlagssystem, das ursprünglich dazu gedacht war, Benutzern Tipps und Vorschläge zur Verbesserung ihrer Windows 11-Workflows zu geben, hat sich fast vollständig in ein Werbesystem zur Bewerbung von Microsoft-Diensten und -Produkten verwandelt. Pop-ups mit Vorschlägen könnten Benutzern ein Microsoft 365-Abonnement anbieten, vorschlagen, ein Android-Telefon mit dem Gerät zu verknüpfen oder eine Backup-Lösung einzurichten. Wenn Sie diese Pop-ups stören, können Sie Ihr System so anpassen, dass sie vollständig deaktiviert werden. Die folgende Anleitung enthält Empfehlungen zum Deaktivieren von Popups auf Geräten mit dem Betriebssystem Windows 11 von Microsoft.
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 aktivieren Sie Live-Untertitel sofort in Windows 11
Jun 27, 2023 am 08:33 AM
So aktivieren Sie Live-Untertitel sofort in Windows 11 1. Drücken Sie Strg+L auf Ihrer Tastatur 2. Klicken Sie auf „Zustimmen“ 3. Es erscheint ein Popup mit der Meldung „Bereit zum Hinzufügen von Untertiteln in Englisch (US)“ (abhängig von Ihrer bevorzugten Sprache) 4. Darüber hinaus Können Sie Obszönitäten filtern, indem Sie auf die Zahnradschaltfläche klicken? Präferenz? Filtern von Swear Verwandte Artikel So beheben Sie den Aktivierungsfehlercode 0xc004f069 in Windows Server Der Aktivierungsprozess unter Windows nimmt manchmal eine plötzliche Wendung und zeigt eine Fehlermeldung mit diesem Fehlercode 0xc004f069 an. Obwohl der Aktivierungsprozess online erfolgt, kann dieses Problem bei einigen älteren Systemen mit Windows Server auftreten. Bestehen Sie diese vorläufigen Prüfungen, wenn diese Prüfungen nicht erfolgreich sind
Was bedeutet h5?
Aug 02, 2023 pm 01:52 PM
H5 bezieht sich auf HTML5, die neueste Version von HTML. H5 ist eine leistungsstarke Auszeichnungssprache, die Entwicklern mehr Auswahlmöglichkeiten und kreativen Raum bietet. Ihr Aufkommen fördert die Entwicklung der Web-Technologie und macht die Interaktion und Wirkung von Webseiten noch besser Wenn es allmählich reift und populär wird, glaube ich, dass es in der Internetwelt eine immer wichtigere Rolle spielen wird.
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.
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
