Comment utiliser le plug-in jQuery pour limiter la taille et le format des fichiers téléchargés

Cette fois, je vais vous expliquer comment utiliser le plug-in jQuery pour limiter la taille et le format des fichiers téléchargés. Quelles sont les précautions sur la façon dont le plug-in jQuery limite la taille et le format des fichiers. fichiers téléchargés Ce qui suit est un cas pratique, jetons un coup d'œil.

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 : parfois vous pouvez rencontrer 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.

(function ($) {
    $.fn.checkFileTypeAndSize = function (options) {
        //默认设置
        var defaults = {
            allowedExtensions: [],
            maxSize: 1024, //单位是KB，默认最大文件尺寸1MB=1024KB
            success: function () { },
            extensionerror: function () { },
            sizeerror: function () { }
        };
        //合并设置
        options = $.extend(defaults, options);
        //遍历元素
        return this.each(function () {
            $(this).on('change', function () {
                //获取文件路径
                var filePath = $(this).val();
                //小写字母的文件路径
                var fileLowerPath = filePath.toLowerCase();
                //获取文件的后缀名
                var extension = fileLowerPath.substring(fileLowerPath.lastIndexOf('.') + 1);
                //判断后缀名是否包含在预先设置的、所允许的后缀名数组中
                if ($.inArray(extension, options.allowedExtensions) == -1) {
                    options.extensionerror();
                    $(this).focus();
                } else {
                    try {
                        var size = 0;
                        if ($.browser.msie) {//ie旧版浏览器
                            var fileMgr = new ActiveXObject("Scripting.FileSystemObject");
                            var fileObj = fileMgr.getFile(filePath);
                            size = fileObj.size; //byte
                            size = size / 1024;//kb
                            //size = size / 1024;//mb
                        } else {//其它浏览器
                            size = $(this)[0].files[0].size;//byte
                            size = size / 1024;//kb
                            //size = size / 1024;//mb
                        }
                        if (size > options.maxSize) {
                            options.sizeerror();
                        } else {
                            options.success();
                        }
                    } catch (e) {
                        alert("错误：" + e);
                    }
                }
            });
        });
    };
})(jQuery);

Faire appel au client devient très simple.

<input type="file" name="f" id="f"/>
@section scripts
{
    <script src="~/Scripts/checkFileTypeAndSize.js"></script>
    <script type="text/
javascript
">
        $(function() {
            $(&#39;#f&#39;).checkFileTypeAndSize({
                allowedExtensions: [&#39;jpg&#39;],
                maxSize: 10,
                success: function() {
                    alert(&#39;ok&#39;);
                },
                extensionerror: function() {
                    alert(&#39;允许的格式为：jpg&#39;);
                    return;
                },
                sizeerror: function() {
                    alert(&#39;最大尺寸10kb&#39;);
                    return;
                }
            });
        });
    </script>
}

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 :

Explication détaillée de l'utilisation de jQuery pour permettre aux navigateurs de passer les uns aux autres et de passer des paramètres

Explication détaillée de l'utilisation du plug-in jquery uploadify

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!