How to use the jQuery plug-in to limit the size and format of uploaded files-JS Tutorial-php.cn

How to use the jQuery plug-in to limit the size and format of uploaded files

php中世界最好的语言

Release： 2018-04-23 11:42:36

Original

2024 people have browsed it

This time I will bring you how to use the jQuery plug-in to limit the size and format of uploaded files. What are the precautions for the jQuery plug-in to limit the size and format of uploaded files. Here are practical cases, let’s take a look.

When uploading files on the client, it is usually necessary to limit the file size and format. The most common method is to use a certain plug-in. Some mature plug-ins do have beautiful interfaces and powerful functions, but the only drawback is: sometimes You may encounter browser compatibility issues. In this article, we will write an "original" jQuery plug-in that can limit the size and format of uploaded files.

First, write a plug-in named checkFileTypeAndSize.js. Limit the file format by judging whether the suffix name of the current file is included in the suffix name array allowed by the preset; by judging whether the size of the current file under IE and other browsers is greater than the maximum file size allowed by the preset, to limit the file size; and provide callback functions for format errors, exceeding the limit size, and meeting 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(&#39;change&#39;, function () {
                //获取文件路径
                var filePath = $(this).val();
                //小写字母的文件路径
                var fileLowerPath = filePath.toLowerCase();
                //获取文件的后缀名
                var extension = fileLowerPath.substring(fileLowerPath.lastIndexOf(&#39;.&#39;) + 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);

Copy after login

The call on the client becomes very 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>
}

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!