По событию изменения для элемента ввода файла

У меня есть 4 файла, которые я хочу, чтобы они запускали процесс загрузки, когда их значение изменилось. Я имею в виду, когда вы выбираете изображение и щелкаете в диалоговом окне выбора изображения, запускается script для загрузки изображения. Я использовал событие onchange, но я думаю, что это неправильное событие:

JS:

$("input[type=file]").on('change',function(){
    alert(this.val());//I mean name of the file
});

HTML:

<div class="form-group col-md-11 col-md-offset-1">
    <input type="file" name="photos[]">
    <input type="file" name="photos[]">
    <input type="file" name="photos[]">
    <input type="file" name="photos[]">
</div>

Что мне делать?

Ответ 1

Событие OnChange - хороший выбор. Но если пользователь выбирает одно и то же изображение, событие не будет запущено, потому что текущее значение совпадает с предыдущим.

Изображение совпадает с измененной шириной, например, и должно быть загружено на сервер.

Чтобы предотвратить эту проблему, вы можете использовать следующий код:

$(document).ready(function(){
    $("input[type=file]").click(function(){
        $(this).val("");
    });

    $("input[type=file]").change(function(){
        alert($(this).val());
    });
});

Ответ 2

Используйте files список файлов элемента вместо val()

$("input[type=file]").on('change',function(){
    alert(this.files[0].name);
});

Ответ 3

Дайте уникальный класс и другой идентификатор для ввода файла

           $("#tab-content").on('change',class,function()
               {
                  var id=$(this).attr('id');
                      $("#"+id).trigger(your function); 
               //for name of file input  $("#"+id).attr("name");
               });