Question

我有两个可以自行运行的脚本，一个验证所选文件是jpeg，然后输出一个警告，如下所示：

(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() {
$('#image').checkFileType({
    allowedExtensions: ['jpg', 'jpeg'],
    success: function() {
        alert('success')
    },
    error: function() {
        alert('Error');

    }
});

});

另一个显示<img>元素

中所选图像的预览

function readURL(input) {
        if (input.files && input.files[0]) {  

            var reader = new FileReader();

            reader.onload = function (e) {

                $('#productImg').show();

                $('#productImg')
                    .attr('src', e.target.result)

            };

            reader.readAsDataURL(input.files[0]);
        }
    }

我正在调用以上函数：

<input type="file" name="image" class="browse" id="image" onchange="readURL(this);" />

我想要做的是组合两个脚本，这样如果图像不是jpeg，它会像第一个脚本一样警告错误，然后如果图像是jpeg则会显示像第二个脚本一样预览。

Answer 1

正如我在评论中提到的，您可以简单地将第二个函数指定为第一个函数的成功回调，并在第二个函数中显示警报，或者在警报之后调用第二个函数（因为您是＆＃39;在第二个函数中对预览元素进行硬编码，它看起来就足以满足当前的要求。）

如果您真的想要概括它，可以尝试下面的内容

$.fn.checkFileType = function (options) {
var defaults = {
    allowedExtensions: [],
    preview: "",
    success: function () {},
    error: function () {}
};
options = $.extend(defaults, options);
$previews = $(options.preview);
return this.each(function (i) {

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

        if ($.inArray(extension, options.allowedExtensions) == -1) {
            options.error();
            $(this).focus();
        } else {
            if (this.files && this.files[0] && $preview) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $preview.show().attr('src', e.target.result);
                    options.success();
                };

                reader.readAsDataURL(this.files[0]);
            } else {
                options.error();
            }

        }

    });

  });
};

您可以按如下方式使用它：

$('#image').checkFileType({
  allowedExtensions: ['jpg', 'jpeg',"gif"],
  preview: ".preview",
  success: function () {
    alert('success')
  },
  error: function () {
    alert('Error');
  }
});

在src选项中指定的jQuery选择器匹配的元素集合中，图像将被设置为<input>索引处的preview元素。

Demo

Answer 2

您可以轻松验证函数readURL（输入）本身的图像类型。

function readURL(input) {

      var image = input.files[0]['name'];
      var image_regex =  /^.*\.(jpeg|JPEG)$/;
      if (!image_regex.test(image)) {
                alert("Only jpeg file are accepted");
                return false;
      }

    if (input.files && input.files[0]) {  

       var reader = new FileReader();

        reader.onload = function (e) {

            $('#productImg').show();

            $('#productImg')
                .attr('src', e.target.result)


        };

        reader.readAsDataURL(input.files[0]);
    }
}

上传图片时，图片会在预览前验证图片。因此用户必须上传正确的图像。同样，您也可以验证各种图像。

fiddle

使用jQuery验证文件类型和显示图像预览

2 个答案:

Demo