使用jQueryvalidation文件类型和显示图像预览

我有两个脚本可以自行运行，一个validation所选文件是一个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'); } }); }); 

另一个显示元素内所选图像的预览

 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]); } } 

我正在调用上面的函数如下：

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

Answer 1

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

如果你真的想要概括它，你可以尝试下面这样的东西

 $.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'); } }); 

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

演示

Answer 2

您可以轻松validation函数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]); } } 

上传图像时，它将在预览之前validation图像。 因此用户必须上传正确的图像。同样，您也可以validation各种图像。

小提琴