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

Question

我已经成功地使用 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();
                }
            });

        });

Answer 1

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

这个文件[0]

访问大小。你可以使用

this.files[0].size.