Jquery改变事件与所有字段具有相同的类

Question

我试图在多个输入字段更改值上运行jquery。例如:我有6个输入类型file字段。我想用一个jquery函数设置所有文件字段的上传限制。

为了实现这一点，我使用了以下jquery代码

$('.image_size_check').change(function(){
$('.image_size_check').each(function(){
var sizeInKB = this.files[0].size/1024; //converting bytes into kb
var sizeLimit= 200;

if (sizeInKB >= sizeLimit) {
alert("Max file for image is 200KB");
$(this).val('');
}
});
});

但是这段代码的问题是，这段代码只在我更改第一个文件字段时运行。当我选择文件的第二个字段，第三个字段，等等，那么这段代码不起作用。

我如何使这段代码运行(不使用onchange事件在输入字段的属性)选择文件上存在的每个文件字段在页

Answer 1

您需要检查控制台错误。它清楚地告诉你问题所在。当循环遍历输入时，只有第一个输入有值，而其他输入没有任何值，因此this.files为空，因此this.files[0].size导致错误:

$('.image_size_check').change(function() {
$('.image_size_check').each(function() {
if (this.files.length) {
var sizeInKB = this.files[0].size / 1024; //converting bytes into kb
var sizeLimit = 200;
if (sizeInKB >= sizeLimit) {
alert("Max file for image is 200KB");
$(this).val('');
}
}
});
});

Hello <input class="image_size_check" type="file" /><br />Hello <input class="image_size_check" type="file" /><br />Hello <input class="image_size_check" type="file" /><br />Hello <input class="image_size_check" type="file" /><br />Hello <input class="image_size_check"
type="file" /><br />Hello <input class="image_size_check" type="file" /><br />Hello <input class="image_size_check" type="file" /><br />Hello <input class="image_size_check" type="file" /><br />Hello <input class="image_size_check" type="file" /><br />Hello
<input class="image_size_check" type="file" /><br />