Maison > interface Web > Tutoriel H5 > Implémentation de la fonction de téléchargement asynchrone de fichiers HTML5

Implémentation de la fonction de téléchargement asynchrone de fichiers HTML5

巴扎黑
Libérer: 2017-08-08 16:21:22
original
1452 Les gens l'ont consulté

Cet article présente brièvement l'utilisation de FormData de Html5 pour implémenter le téléchargement asynchrone de fichiers. Il peut également implémenter des barres de progression de téléchargement et la vérification de la taille des fichiers. Le code est simple et facile à comprendre, très bon et a une valeur de référence. en cas de besoin, vous pouvez vous y référer

1 Introduction

Développer une fonction de téléchargement de fichiers n'est jamais une chose agréable, surtout le téléchargement asynchrone que j'ai utilisé. Les solutions de téléchargement iframe et Flash semblaient également 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 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>
Copier après la connexion

3 Téléchargement JQuery


$("#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("上传成功!");
        }
    });
});
Copier après la connexion

4 Vérification de la taille du fichier JQuery

Taille du fichier et comportement correspondant le contrôle doit être géré par vous-même si nécessaire. Cette méthode n'est qu'un exemple de méthode.


$(&#39;#u_photo&#39;).on(&#39;change&#39;, function() {
    var file = this.files[0];
    if (file.size > 1024*1000) {
        alert(&#39;文件最大1M!&#39;)
    }
});
Copier après la connexion

5 Barre de progression JQuery

Ajouter xhr à la méthode ajax pour contrôler le téléchargement Progression, la barre de progression peut utiliser la barre de progression HTML5 ou 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(&#39;progress&#39;, function(e) {
            if (e.lengthComputable) {
                $(&#39;progress&#39;).attr({
                    value: e.loaded,
                    max: e.total,
                });
            }
        } , false);
    }
    return myXhr;
}
Copier après la connexion

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>
Copier après la connexion

6.2 servlet-context.xml


<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />
Copier après la connexion

6.3 L'exemple de programme Controller

ne fournit pas le code correspondant pour la vérification, le stockage et le traitement des fichiers.


@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";
}
Copier après la connexion

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 le solution suivante :

JQuery File Uploader

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal