Как сбросить только 1 input file?

Question

[zaart]

Здравствуйте!

У меня на странице есть 2 input с загрузкой картинок:

<input type="file" name="i1" class="image-upload" onchange="attach(this)" accept="image/jpeg,image/png"  />
<input type="file" name="i2" class="image-upload" onchange="attach(this)" accept="image/jpeg,image/png"  />

Я проверяю файл на размер и сбрасываю input, если размер превышает:

function attach(input){
        var attach_size = 10*1024*1024; // 10 МБ.
        var attach_file = input.files[0];
        if(attach_file.size > attach_size){
            $(".email-error").html('Размер файла должен быть не больше 10 МБ').css("display","block");
            $('.image-upload').val(''); // Удаляем файл, если он больше положенного.
        }
    };

Скажите, пожалуйста, как сделать чтоб сбрасывался только input в котором файл превышающий размер, а не все на странице?

Answer 1

[Надим]

$('.image-upload').val(''); замени на $(input).val('');

Answer 2

[alexalexes]

Можно использовать css превдокласс nth-child, чтобы выловить нужный элемент с одинаковым классом в пределах одного контейнера.

$('.image-upload:nth-child(' + номер_интупа_начиная_с_единицы + ')').val('');

Можно воспользоваться возможностями jquery:

$('.image-upload')[номер_интупа_начиная_с_нуля].val('');

А вообще, тут напрашивается сделать шаблон в VueJS, чтобы обеспечить привязку элементов DOM-дерева и бизнес-логики скрипта. Чтобы не высчитывать на каждое событие, а для какого i-ого элемента оно предназначено. Но это уже совсем другая история.