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

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('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);

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>
}

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!

Recommended reading:

jQuery allows browsers to jump to each other and pass parameters using detailed explanation

jquery plug-in uploadify usage detailed explanation

The above is the detailed content of How to use the jQuery plug-in to limit the size and format of uploaded files. For more information, please follow other related articles on the PHP Chinese website!