Asynchroner Upload der H5-Datei

Dieses Mal bringe ich Ihnen das asynchrone Upload von H5-Dateien. Was sind die Vorsichtsmaßnahmen für das asynchrone Hochladen von H5-Dateien?

1 Einführung

Die Entwicklung der Funktion Datei-Upload ist nie eine angenehme Sache, insbesondere der asynchrone Upload, den ich verwendet habe iframe- und Flash-Upload-Lösungen, und sie fühlen sich alle sehr umständlich an. In diesem Artikel wird kurz die Verwendung von FormData von Html5 zum Implementieren des asynchronen Hochladens von Dateien vorgestellt. Außerdem können Uploads Fortschrittsbalken und Überprüfung der Dateigröße usw. implementiert werden. Der Server verwendet zur 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 JQuery-Upload

$("#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 bei Bedarf von Ihnen selbst gehandhabt werden. 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 Andere Fortschrittsbalken können ebenfalls verwendet werden. 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 bietet keine Dateiüberprüfung, entsprechender Code für Speicherung und Verarbeitung.

@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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Welche neuen Tags wurden in HTML5 hinzugefügt?

So verwenden Sie Phonegap, um Kontakte zu finden

Das obige ist der detaillierte Inhalt vonAsynchroner Upload der H5-Datei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!