Téléchargement asynchrone de fichiers H5

Cette fois, je vais vous présenter le téléchargement asynchrone de fichiers H5. Quelles sont les précautions pour le téléchargement asynchrone de fichiers H5. Voici un cas pratique, jetons un coup d'œil.

1 Introduction

Développer la fonction Téléchargement de fichiers n'est jamais une chose agréable, surtout le téléchargement asynchrone que j'ai utilisé. solutions de téléchargement iframe et Flash, et elles semblent toutes très gênantes. 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 la barre de progression du téléchargement et la vérification de la taille du fichier, etc. 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 Téléchargement JQuery

$("#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 le comportement correspondant doivent être gérés par vous-même si nécessaire, cette méthode Juste 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. D'autres barres de progression peuvent également être utilisées. 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

l'exemple de programme ne fournit pas de vérification de fichier, le code correspondant pour stockage et transformation.

@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 :

JQuery File Uploader

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Quelles sont les nouvelles balises ajoutées en html5

Comment utiliser Phonegap pour trouver des contacts

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!