Exemple d'analyse de la façon dont HTML5 implémente la fonction de téléchargement de fichiers asynchrone

Cet article présente brièvement l'utilisation de FormData de Html5 pour réaliser un téléchargement asynchrone de fichiers. Il peut également implémenter le téléchargement d'une barre de progression. et taille du fichier, etc., le code est simple et facile à comprendre, très bon, et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

1. Introduction

Développer la fonction de téléchargement de fichiers n'a jamais été une chose agréable, surtout le téléchargement asynchrone. J'ai utilisé les solutions de téléchargement de iframe et Flash, et ils se sentent tous très mal à l'aise. Cet article présente brièvement l'utilisation de FormData de HTML5 pour implémenter le téléchargement asynchrone de fichiers, et peut également implémenter des barres de progression de téléchargement et une vérification de la taille des fichiers. Le serveur utilise la solution springMVC pour le traitement.

2 Code HTML

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

3 JQueryTélécharger

$("#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 Vérification de la taille du fichier JQuery

Le contrôle de la taille du fichier et du

comportement correspondant doit être basé sur Vous devez le gérer vous-même, cette méthode n'est qu'un exemple de méthode.

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

5 Barre de progression JQuery

Ajoutez xhr à la méthode ajax pour contrôler la progression du téléchargement La barre de progression peut utiliser la progression. de html5 Vous pouvez également utiliser

d'autres barres de progression. L'affichage et le masquage de la barre de progression doivent être gérés par vous-même. Cette méthode ne présente que brièvement le contrôle de base de la barre de progression.

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;
}

Serveur SpringMVC 6

Dépendance Maven 6.1

<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 Contrôleur

exemple de programme, et Le le code correspondant pour la vérification, le stockage et le traitement des fichiers n’est pas fourni.

@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 Compatibilité

IE 10+, Firefox 4.0+,

Chrome 7+, Safari 5 +, Opera 12+

8 Lectures recommandées

Si vous n'êtes pas satisfait de la solution ci-dessus, il est recommandé d'utiliser la solution suivante :

Téléchargeur de fichiers JQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!