Heim > Artikel > Web-Frontend > Tutorial-Beispiel für das Hochladen großer Dateien in Webseiten mit h5

Tutorial-Beispiel für das Hochladen großer Dateien in Webseiten mit h5

零下一度Original: 2017-05-11 14:24:362760Durchsuche

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:

Tutorial-Beispiel für das Hochladen großer Dateien in Webseiten mit h5

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielcode für die Verwendung von h5-Video-TagsNächster Artikel：Beispielcode für die Verwendung von h5-Video-Tags

In Verbindung stehende Artikel

Mehr sehen