Heim > Web-Frontend > H5-Tutorial > Hauptteil

Verwenden von HTML5 zum Implementieren eines Codebeispiels für die asynchrone Datei-Upload-Funktion

怪我咯
Freigeben: 2017-05-29 10:03:32
Original
1822 Leute haben es durchsucht

In diesem Artikel wird kurz die Verwendung von FormData zum Implementieren des asynchronen Hochladens von Dateien vorgestellt. Der Code ist einfach und leicht zu verstehen, sehr gut und hat einen Referenzwert Ich muss darauf verweisen

1 Einführung

Die Entwicklung einer Datei-Upload-Funktion ist nie eine angenehme Sache, insbesondere der asynchrone Upload, den ich verwendet habe Iframe- und Flash-Upload-Lösungen fühlten sich ebenfalls 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 Upload-Fortschrittsbalken und die Überprüfung der Dateigröße 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>
Nach dem Login kopieren

3 JQuery Hochladen

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

4 JQuery-Dateigrößenüberprüfung

Die Kontrolle der Dateigröße und des entsprechenden Verhaltens muss bei Bedarf von Ihnen selbst gehandhabt werden. Diese Methode ist nur eine Beispielmethode.

$(&#39;#u_photo&#39;).on(&#39;change&#39;, function() {
    var file = this.files[0];
    if (file.size > 1024*1000) {
        alert(&#39;文件最大1M!&#39;)
    }
});
Nach dem Login kopieren

5 JQuery-Fortschrittsbalken

Fügen Sie xhr zur Ajax-Methode hinzu Der Upload-Fortschritt kann über den Fortschrittsbalken von HTML5 oder andere Fortschrittsbalken gesteuert 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(&#39;progress&#39;, function(e) {
            if (e.lengthComputable) {
                $(&#39;progress&#39;).attr({
                    value: e.loaded,
                    max: e.total,
                });
            }
        } , false);
    }
    return myXhr;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

6.2 servlet-context.xml

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

6.3 Controller

Das Beispielprogramm stellt keinen entsprechenden Code für die Dateiüberprüfung, -speicherung und -verarbeitung bereit.

@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";
}
Nach dem Login kopieren

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 sie empfohlen um die folgende Lösung zu verwenden:

JQuery File Uploader

Das obige ist der detaillierte Inhalt vonVerwenden von HTML5 zum Implementieren eines Codebeispiels für die asynchrone Datei-Upload-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage