我已成功使用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();
}
});
});
答案 0 :(得分:2)
当您从“文件选择器”对话框中选择一个文件时,会得到一个“文件数组对象”。该对象具有有关文件的信息。您可以像这样访问单个文件。
this.files [0]
访问大小。您可以使用
this.files [0] .size。
答案 1 :(得分:1)
我可以看到您所指的理想答案是仅提供文件扩展名验证。因此,它可以正确进行,因此,为了检查jquery中@client端的文件大小,您可以执行以下操作:
if(this.files[0].size > 2000000) {
alert("Please upload file less than 2MB. Thanks!!");
$(this).val('');
}