是否可以在上传前同时验证文件大小和扩展名？

Posted 2023-05-09

【中文标题】是否可以在上传前同时验证文件大小和扩展名？

【英文标题】：Is possible to validate file size and extension before upload at the same time?

【发布时间】：2019-09-14 14:50:02

【问题描述】：

我已成功使用 jquery 验证文件扩展名，但是当我尝试验证文件大小时，我的代码无法正常工作。

我使用的是最新的 jquery 版本。

此处的问题扩展和大小文件验证代码：

(function($) $.fn.checkFileType = function(options) 
                var defaults = 
                    allowedExtensions: [],
                    success: function() ,
                    error: function() 
                ;
                options = $.extend(defaults, options);

                return this.each(function()  

                    $(this).on('change', function() 
                        var value = $(this).val(),
                        file = value.toLowerCase(),
                        extension = file.substring(file.lastIndexOf('.') + 1);

                        if ($.inArray(extension, options.allowedExtensions) == -1) 
                            options.error();
                            $(this).focus();
                         else 
                            options.success();

                        

                    );

                    $(this).on('change', function()  //its wrong ?
                        var size = $(this).files[0].size,

                        if (size <= 200)  
                            options.success();
                         else 
                            options.error();
                            $(this).focus();

                        

                    );

                );
            ;

        )(jQuery);
        $(function() 
            $('#upload_file').checkFileType( // here is input file 
                allowedExtensions: ['jpg', 'jpeg'],
                success: function() 
                    $("#alert").html("File allowed Extensions : jpg or jpeg").show().fadeOut(5000);
                ,
                error: function() 
                    $("#alert").html("Please upload file with jpg or jpeg and 200kb maximum size ").show().fadeOut(5000);
                    var $el = $('#upload_file');
                    $el.wrap('<form>').closest('form').get(0).reset();
                    $el.unwrap();
                
            );

        );

这里是成功扩展文件验证代码：

        (function($) 
            $.fn.checkFileType = function(options) 
                var defaults = 
                    allowedExtensions: [],
                    success: function() ,
                    error: function() 
                ;
                options = $.extend(defaults, options);

                return this.each(function() 

                    $(this).on('change', function() 
                        var value = $(this).val(),
                        file = value.toLowerCase(),
                        extension = file.substring(file.lastIndexOf('.') + 1);

                        if ($.inArray(extension, options.allowedExtensions) == -1) 
                            options.error();
                            $(this).focus();
                         else 
                            options.success();

                        

                    );

                );
            ;

        )(jQuery);
        $(function() 
            $('#upload_file').checkFileType( // here is input file 
                allowedExtensions: ['jpg', 'jpeg'],
                success: function() 
                    $("#alert").html("File allowed Extensions : jpg or jpeg").show().fadeOut(5000);
                ,
                error: function() 
                    $("#alert").html("Please upload file with jpg or jpeg and 200kb maximum size ").show().fadeOut(5000);
                    var $el = $('#upload_file');
                    $el.wrap('<form>').closest('form').get(0).reset();
                    $el.unwrap();
                
            );

        );

【问题讨论】：

重复***.com/questions/1601455/…

【参考方案1】：

当你从文件选择器对话框中选择一个文件时，你会得到一个文件数组对象。此对象包含有关文件的信息。您可以访问单个文件。

this.files[0]

访问大小。你可以使用

this.files[0].size.

【讨论】：

非常有用

【参考方案2】：

我可以看到您所指的理想答案是只有文件扩展名验证可用。所以它发生正确，所以为了检查 jquery 中@client 端的文件大小，你可以这样做：

 if(this.files[0].size > 2000000) 
   alert("Please upload file less than 2MB. Thanks!!");
   $(this).val('');