VerwendungHTML5ShardingHochladenSehr große Dateien
Das direkte Hochladen großer Dateien auf eine Webseite bereitete im Allgemeinen zwei Arten von Problemen: Erstens: Wenn während des Hochladens ein Fehler auftritt, ist die Serverkonfiguration komplex und das Problem des Empfangs übergroßer Formulare und Zeitüberschreitungen muss berücksichtigt werden. Wenn es sich um einen verwalteten Host handelt, ist dies möglicherweise nicht der Fall geändert und kann standardmäßig nur Anhänge empfangen, die kleiner als 4 MB sind.
Die ideale Lösung besteht darin, die großen Dateien zu fragmentieren und sie einzeln an den Server zu senden, und der Server führt sie dann zusammen. Dies hat den Vorteil, dass bei einem fehlgeschlagenen Upload nur ein Fragment verloren geht und nicht die gesamte Datei erneut übertragen werden muss. Darüber hinaus kann die Größe jedes Fragments innerhalb von 4 MB gesteuert werden und der Server kann sich anpassen, ohne Einstellungen vornehmen zu müssen .
Die häufig verwendete Lösung ist RIA. Am Beispiel von Flex wird normalerweise die Methode FileReference.load verwendet, um die Datei zu laden, um ein ByteArray zu erhalten, und dann das Formular in Slices zu erstellen (höhere Versionen von Flash tun dies nicht). direkten Zugriff auf die Datei ermöglichen). Diese Lademethode kann jedoch nur kleinere Dateien laden, etwa nicht mehr als 300 MB, sodass ihre Anwendbarkeit nicht sehr gut ist.
Glücklicherweise können wir jetzt, da wir HTML5 haben, Shards direkt erstellen. Dies ist ein sehr erfreulicher Fortschritt, aber es ist schade, dass er derzeit nicht allgemein anwendbar ist (IE, IE, ich hasse dich wirklich so). viel).
Kehren wir zum Kern zurück, werfen wir einen Blick auf eine DEMO, basierend auf ASP.Net MVC3, es ist nur ein Beispiel und viele Probleme wurden vereinfacht.
Hauptsächlich auf der Clientseite spiegeln sich hier neue Funktionen wider:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>HTML5大文件分片上传示例</title>
<script src="../Scripts/jquery-1.11.1.min.js"></script>
<script>
var page = {
init: function(){
$("#upload").click($.proxy(this.upload, this));
},
upload: function(){
var file = $("#file")[0].files[0], //文件对象
name = file.name, //文件名
size = file.size, //总大小
succeed = 0;
var shardSize = 2 * 1024 * 1024, //以2MB为一个分片
shardCount = Math.ceil(size / shardSize); //总片数
for(var i = 0;i < shardCount;++i){
//计算每一片的起始与结束位置
var start = i * shardSize,
end = Math.min(size, start + shardSize);
//构造一个表单，FormData是HTML5新增的
var form = new FormData();
form.append("data", file.slice(start,end)); //slice方法用于切出文件的一部分
form.append("name", name);
form.append("total", shardCount); //总片数
form.append("index", i + 1); //当前是第几片
//Ajax提交
$.ajax({
url: "../File/Upload",
type: "POST",
data: form,
async: true, //异步
processData: false, //很重要，告诉jquery不要对form进行处理
contentType: false, //很重要，指定为false才能形成正确的Content-Type
success: function(){
++succeed;
$("#output").text(succeed + " / " + shardCount);
}
});
}
}
};
$(function(){
page.init();
});
</script>
</head>
<body>
<input type="file" id="file" />
<button id="upload">上传</button>
<span id="output" style="font-size:12px">等待</span>
</body>
</html>Die Slice-Methode und FormData hier gab es vor HTML5 nicht. Durch diese Methode wird unser Formular wie folgt aufgebaut. Schauen Sie sich die Paketerfassung an:
Sie können sehen, dass der erstellte Inhaltstyp mehrteilig/Formulardaten ist. Das ist das traditionellste Datei-Upload-Formular, das den RFC-Standards entspricht. Darüber hinaus sind auch der Name, die Summe und andere Attribute , die wir gleichzeitig übermitteln, im Formular enthalten.
Dann ist da noch der Server, es gibt nichts Neues, er empfängt nur eine gewöhnliche Datei:
[HttpPost]
public ActionResult Upload()
{
//从Request中取参数，注意上传的文件在Requst.Files中
string name = Request["name"];
int total = Convert.ToInt32(Request["total"]);
int index = Convert.ToInt32(Request["index"]);
var data = Request.Files["data"];
//保存一个分片到磁盘上
string dir = Server.MapPath("~/Upload");
string file = Path.Combine(dir, name + "_" + index);
data.SaveAs(file);
//如果已经是最后一个分片，组合
//当然你也可以用其它方法比如接收每个分片时直接写到最终文件的相应位置上，但要控制好并发防止文件锁冲突
if(index == total)
{
file = Path.Combine(dir, name);
var fs = new FileStream(file, FileMode.Create);
for(int i = 1;i <= total;++i)
{
string part = Path.Combine(dir, name + "_" + i);
var bytes = System.IO.File.ReadAllBytes(part);
fs.Write(bytes, 0, bytes.Length);
bytes = null;
System.IO.File.Delete(part);
}
fs.Close();
}
//返回是否成功，此处做了简化处理
return Json(new { Error = 0 });
}Viele Probleme in der obigen DEMO sind vereinfacht, zum Beispiel wird nichts getan Ausnahmebehandlung , der Client beurteilt nicht, ob ein Fehler auf dem Server vorliegt und versucht es erneut, Sie können es selbst verbessern.
Auf der Grundlage des oben Gesagten können wir viele funktionale Erweiterungen vornehmen. Beispielsweise können wir steuern, ob alle Shards nacheinander oder gleichzeitig hochgeladen werden, um verschiedenen Anwendungen gerecht zu werden. Als weiteres Beispiel können wir den entsprechenden HASH vor dem Hochladen der gesamten Datei und vor dem Hochladen in Teilen berechnen und eine Anfrage an den Server senden, um zu fragen, ob die Datei bereits vorhanden ist. Laden Sie sie nicht erneut hoch . Dies wird erreicht.
[Verwandte Empfehlungen]
1. Kostenloses h5-Online-Video-Tutorial
2 . HTML5-Vollversionshandbuch
3. php.cn Original-HTML5-Video-Tutorial
Das obige ist der detaillierte Inhalt vonTutorial-Beispiel für das Hochladen großer Dateien in Webseiten mit h5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Beispiele für H5 -Code: Praktische Anwendungen und TutorialsApr 25, 2025 am 12:10 AMH5 bietet eine Vielzahl neuer Funktionen und Funktionen und verbessert die Fähigkeiten der Front-End-Entwicklung erheblich. 1. Multimedia-Unterstützung: Einbetten von Medien und Elementen, keine Plug-Ins sind erforderlich. 2. Leinwand: Verwenden Sie Elemente, um 2D -Grafiken und -Animationen dynamisch zu rendern. 3. Lokaler Speicher: Implementieren Sie die persistente Datenspeicherung über LocalStorage und SessionStorage, um die Benutzererfahrung zu verbessern.
Die Verbindung zwischen H5 und HTML5: Ähnlichkeiten und UnterschiedeApr 24, 2025 am 12:01 AMH5 und HTML5 sind verschiedene Konzepte: HTML5 ist eine Version von HTML, die neue Elemente und APIs enthält. H5 ist ein Rahmen für mobile Anwendungsentwicklungen, die auf HTML5 basieren. HTML5 pariert und rendert Code über den Browser, während H5 -Anwendungen Container ausführen und über JavaScript mit nativem Code interagieren müssen.
Die Bausteine des H5 -Codes: Schlüsselelemente und deren ZweckApr 23, 2025 am 12:09 AMZu den wichtigsten Elementen von HTML5 gehören ,,,,,, usw., mit denen moderne Webseiten erstellt werden. 1. Definieren Sie den Kopfinhalt, 2. Zum Navigieren durch den Link, 3. darstellen den Inhalt unabhängiger Artikel, 4. organisieren Sie den Seiteninhalt, 5. Zeigen Sie den Seitenleisteninhalt an, 6. Definieren Sie die Fußzeile. Diese Elemente verbessern die Struktur und Funktionalität der Webseite.
HTML5 und H5: Verständnis der gemeinsamen VerwendungApr 22, 2025 am 12:01 AMEs gibt keinen Unterschied zwischen HTML5 und H5, der Abkürzung von HTML5. 1.HTML5 ist die fünfte Version von HTML, die die Multimedia- und interaktiven Funktionen von Webseiten verbessert. 2.H5 wird häufig verwendet, um auf HTML5-basierte mobile Webseiten oder -anwendungen zu verweisen, und eignet sich für verschiedene mobile Geräte.
HTML5: Die Bausteine des modernen Webs (H5)Apr 21, 2025 am 12:05 AMHTML5 ist die neueste Version der Hypertext -Markup -Sprache, die von W3C standardisiert wurde. HTML5 führt neue semantische Tags, Multimedia -Support- und Form -Verbesserungen ein, verbessert die Webstruktur, die Benutzererfahrung und die SEO -Effekte. HTML5 führt neue semantische Tags vor, wie z. HTML5 unterstützt Multimedia-Elemente und es sind keine Plug-Ins von Drittanbietern erforderlich, wodurch die Benutzererfahrung und die Ladegeschwindigkeit verbessert werden. HTML5 verbessert die Formfunktionen und führt neue Eingangstypen wie usw. ein, die die Effizienz der Benutzererfahrung und der Form von Formularverifizierung verbessert.
H5 -Code: Sauberes und effizientes HTML5 schreibenApr 20, 2025 am 12:06 AMWie schreibe ich sauberen und effizienten HTML5 -Code? Die Antwort besteht darin, häufige Fehler zu vermeiden, indem Tags, strukturierte Code, Leistungsoptimierung und die Vermeidung häufiger Fehler vermieden werden. 1. Verwenden Sie semantische Tags wie usw., um die Code -Lesbarkeit und SEO -Effekt zu verbessern. 2. Halten Sie den Code strukturiert und lesbar, wobei entsprechende Eindrücke und Kommentare verwendet werden. 3. Optimieren Sie die Leistung, indem Sie unnötige Tags reduzieren, CDN- und Komprimierungscode. V.
H5: Wie es die Benutzererfahrung im Web verbessertApr 19, 2025 am 12:08 AMH5 verbessert die Erfahrung des Webbenutzers mit Multimedia -Support, Offline -Speicher und Leistungsoptimierung. 1) Multimedia -Unterstützung: H5 und Elemente vereinfachen die Entwicklung und verbessern die Benutzererfahrung. 2) Offline -Speicher: Webstorage und IndexedDB ermöglichen die Verstärkung der Erfahrung offline. 3) Leistungsoptimierung: Webworker und Elemente optimieren die Leistung, um den Bandbreitenverbrauch zu verringern.
Dekonstruieren von H5 -Code: Tags, Elemente und AttributeApr 18, 2025 am 12:06 AMDer HTML5 -Code besteht aus Tags, Elementen und Attributen: 1. Das Tag definiert den Inhaltstyp und ist von Winkelklammern umgeben, wie z. 2. Elemente bestehen aus Start -Tags, Inhalten und End -Tags wie Inhalten. 3. Attribute definieren Schlüsselwertpaare im Start-Tag und verbessern Funktionen, z. B.. Dies sind die grundlegenden Einheiten zum Aufbau von Webstruktur.
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
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
mPDF
mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),
SAP NetWeaver Server-Adapter für Eclipse
Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
EditPlus chinesische Crack-Version
Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion
