Exemple de plug-in jQuery qui limite la taille et le format des fichiers téléchargés_jquery

L'exemple de cet article décrit le plug-in jQuery qui limite la taille et le format des fichiers téléchargés. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Lors du téléchargement de fichiers sur le client, il est généralement nécessaire de limiter la taille et le format du fichier. La méthode la plus courante consiste à utiliser un certain plug-in. Certains plug-ins matures ont de belles interfaces et des fonctions puissantes. mais le seul inconvénient est que vous rencontrez parfois des problèmes de compatibilité du navigateur. Dans cet article, nous allons écrire un plug-in jQuery « original » qui permet de limiter la taille et le format des fichiers téléchargés.

Tout d’abord, écrivez un plug-in nommé checkFileTypeAndSize.js. Limitez le format de fichier en jugeant si le nom de suffixe du fichier actuel est inclus dans le tableau de noms de suffixes autorisé par le préréglage en jugeant si la taille du fichier actuel sous IE et d'autres navigateurs est supérieure à la taille de fichier maximale autorisée par le préréglage ; prédéfini, pour limiter la taille du fichier et fournir des fonctions de rappel pour les erreurs de format, le dépassement de la taille limite et le respect des conditions.

Copier le code Le code est le suivant :

(fonction ($) {
$.fn.checkFileTypeAndSize = fonction (options) {
//Paramètres par défaut
      var valeurs par défaut = {
              Extensions autorisées : [],
                 maxSize : 1024, //L'unité est le Ko, la taille maximale par défaut du fichier est de 1 Mo = 1 024 Ko
Succès : function () { },
              erreur d'extension : fonction () { },
erreur de taille : fonction () { }
        };
//Fusionner les paramètres
options = $.extend(valeurs par défaut, options);
//Éléments traversants
          renvoie this.each(function () {
                 $(this).on('change', function () {
//Obtenir le chemin du fichier
              var filePath = $(this).val();
//Chemin du fichier en minuscules
              var fileLowerPath = filePath.toLowerCase();
//Obtenir le nom suffixe du fichier
            var extension = fileLowerPath.substring(fileLowerPath.lastIndexOf('.') 1);
//Déterminez si le nom du suffixe est inclus dans le tableau de noms de suffixes prédéfinis et autorisés
Si ($.inArray(extension, options.allowedExtensions) == -1) {
options.extensionerror();
                            $(this).focus();
                     } autre {
                     essayez {
                       var size = 0;
Si ($.browser.msie) {//ie ancienne version du navigateur
                                                          var fileMgr = new ActiveXObject("Scripting.FileSystemObject");
                                                                                    var fileObj = fileMgr.getFile(filePath);
size = fileObj.size; //octet
taille = taille / 1024;//ko
//taille = taille / 1024;//Mo
                                  } autre {//Autres navigateurs
size = $(this)[0].files[0].size;//byte
taille = taille / 1024;//ko
//taille = taille / 1024;//Mo
                                                                                                          } Si (taille > options.maxSize) {
options.sizeerror();
                            } autre {
options.success();
                                                                                                          }                                  } capture(e) {
alert("Erreur : "e);
                 }
                }
            });
        });
};
})(jQuery);

Faire appel au client devient très simple.

Copier le code Le code est le suivant :<input type="file" name="f" id= "f" />

Scripts de @section

{
<script src="~/Scripts/checkFileTypeAndSize.js"></script>
<script type="text/javascript">
          $(function() {
                 $('#f').checkFileTypeAndSize({
                                                                                                                                                                                                                                                       Extensions autorisées : ['jpg'],
                    taille max : 10,
Succès : function() {
alert('ok');
                 },
erreur d'extension : fonction() {
alert('Le format autorisé est : jpg');
                    revenir ;
                 },
erreur de taille : fonction() {
alert('Taille maximale 10 Ko');
                    revenir ;
                }
            });
        });
</script>
>

J'espère que cet article sera utile à la programmation jQuery de chacun.