Why does ajax upload send multiple files?

Question

PHP

I downloaded a plugin for ajax file upload, this one: https://github.com/burt202/lite-uploader/blob/mast... I inserted
the following code on the page:

$('.fileUpload').live('click', function(){
      $(this).liteUploader({
      script: '/upload_images/'
      })
      .on('lu:progress', function (e, percentage) {
        $(this).parent().find('.upimtx .progressbar').css('width', percentage + '%');
      })
      .on('lu:success', function (e, response) {
        alert(response);
        obj = jQuery.parseJSON(response);
        $(this).parent().find("img").remove();
        $(this).parent().find(".images_hidden").val(obj.imagename);
        $(this).parent().prepend(obj.image);
      });
    });

And everything seems to be fine, it sends files to the server, but if you select a file, then everything is fine, if you select another file in the same input, then 2 files are sent to the server, if the third time, then already 3 and so on. I can't figure out why...

Answer 1

For starters, forget about live('click'), on() has been used for a long time.
You initialize the uploader every time, why?
Why the whole live click wrapper, instead of $('.file').liteUploader()

Answer 2

I don't know, it's probably a crutch, but that's how it turned out for me

function in_upload(box){ // инициализация для загрузки через ajax
    $(box).liteUploader({
      script: '/upload_images/'
      })
      .on('lu:progress', function (e, percentage) {
        $(this).parent().find('.upimtx .progressbar').css('width', percentage + '%');
      })
      .on('lu:success', function (e, response) {
          obj = jQuery.parseJSON(response);
          $(this).parent().find("img").remove();
          $(this).parent().find(".images_hidden").val(obj.imagename);
          $(this).parent().prepend(obj.image);
    });
  } 

in_upload('#fileUpload_' + index); // вызываем функцию инициализации