Beispielanalyse, wie HTML5 die asynchrone Datei-Upload-Funktion implementiert

Dieser Artikel stellt kurz die Verwendung von Html5s FormData vor, um einen asynchronen Upload von Dateien zu erreichen, und kann auch den Upload-Fortschrittsbalken implementieren und Dateigrößenüberprüfung usw. Der Code ist einfach und leicht zu verstehen, sehr gut und hat Referenzwert. Freunde, die ihn benötigen, können darauf verweisen

1 Einführung

Die Entwicklung der Funktion Datei-Upload war noch nie eine angenehme Sache, insbesondere der asynchrone Upload. Ich habe die Upload-Lösungen von verwendet wennrame und Flash, und sie fühlen sich alle sehr peinlich an. In diesem Artikel wird kurz die Verwendung von FormData von HTML5 zum Implementieren des asynchronen Hochladens von Dateien vorgestellt. Außerdem können Upload-Fortschrittsbalken und die Überprüfung der Dateigröße implementiert werden. Der Server verwendet für die Verarbeitung die SpringMVC-Lösung.

2 HTML-Code

<form id="myForm">
    <input type="file" id="u_photo" name="u_photo" />
    <input type="button" id="submit-btn" value="上传" />
</form>

3 JQueryHochladen

$("#submit-btn").on('click', function() {
    $.ajax({
        url:"/test/upload",
        type:"post",
        data:new FormData($("#myForm").get(0)),
        //十分重要，不能省略
        cache: false,
        processData: false,
        contentType: false,
        success: function () {
            alert("上传成功！");
        }
    });
});

4 Überprüfung der JQuery-Dateigröße

Die Kontrolle der Dateigröße und des entsprechenden Verhaltens muss erfolgen Basierend auf Sie müssen selbst damit umgehen. Diese Methode ist nur eine Beispielmethode.

$('#u_photo').on('change', function() {
    var file = this.files[0];
    if (file.size > 1024*1000) {
        alert('文件最大1M！')
    }
});

5 JQuery-Fortschrittsbalken

Fügen Sie xhr zur Ajax-Methode hinzu, um den Upload-Fortschritt zu steuern von html5 Sie können auch andere Fortschrittsbalken verwenden. Das Anzeigen und Ausblenden des Fortschrittsbalkens muss von Ihnen selbst durchgeführt werden. Diese Methode führt nur kurz in die grundlegende Steuerung des Fortschrittsbalkens ein.

xhr: function() {
    var myXhr = $.ajaxSettings.xhr();
    if (myXhr.upload) {
        myXhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                $('progress').attr({
                    value: e.loaded,
                    max: e.total,
                });
            }
        } , false);
    }
    return myXhr;
}

6 SpringMVC-Server

6.1 Maven-Abhängigkeit

<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.5</version>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.2</version>
</dependency>

6.2 servlet-context.xml

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

6.3 Controller

Beispielprogramm und The Ein entsprechender Code zur Dateiüberprüfung, -speicherung und -verarbeitung ist nicht angegeben.

@RequestMapping(value="/test/upload",method = RequestMethod.POST)
@ResponseBody
public String upload(@RequestParam("u_photo") MultipartFile u_photo) {
    System.out.println("u_photo="+u_photo.getSize());
    return "ok";
}

7-Kompatibilität

IE 10+, Firefox 4.0+, Chrome 7+, Safari 5 +, Opera 12+

8 Empfohlene Lektüre

Wenn Sie mit der oben genannten Lösung nicht zufrieden sind, wird die Verwendung der folgenden Lösung empfohlen :

JQuery File Uploader

Das obige ist der detaillierte Inhalt vonBeispielanalyse, wie HTML5 die asynchrone Datei-Upload-Funktion implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!