Несколько файлов для загрузки с плагином ajaxForm

Question

Я использовал плагин ajaxForm для создания нескольких загрузок. Загрузка работает отлично, даже может добавлять файлы в список и удалять.

Проблема заключается в том, что при добавлении, например, 3 файлов и удалении одного из списка загружается с 3, то есть он не удаляет «удаленный» файл.

var myFiles = []; 
var formData; 

$('#images').on('change',function(){ 
    var files = this.files.length; 

    if (files > 5) { 
     alert("Select only 5 files at a time."); 
    } else { 
     for (var i = 0; i < files; i++) { 
      name = this.files[i].name; 
      size = this.files[i].size; 
      type = this.files[i].type; 

      if (size > 5242880) { 
       alert("The file "+name+" exceeds the limit of 5mb"); 
      } else if (type != 'image/png' && type != 'image/jpg' && type != 'image/gif' && type != 'image/jpeg') { 
       alert("The file "+ name +" must be of type JPG, GIF or PNG."); 
      } else { 
       $('.list').append('<span>'+name+' - <a href="javascript:;" data-file="'+name+'" title="Excluir" class="delFile">X</a><br></span>'); 
       $('.list').show(); 
       removeFile(); 
       myFiles.push(this.files[i]); 
       console.log(myFiles); 
      } 
     } 
    } 
}); 

$('#multiple_upload_form').submit(function(){ 
    formData = new FormData(); 
    formData.append('name', $('#name').val()); 
    formData.append('phone', $('#phone').val()); 
    for (var i = 0; i < myFiles.length; i++) { 
     formData.append('files', myFiles[i]); 
    } 
}); 

$('#multiple_upload_form').ajaxForm({ 
    target:'#images_preview', 
    data: formData, 
    url: 'upload.php', 
    beforeSubmit:function(formData, jqForm, options){ 
     $('.uploading').show(); 
     console.log(formData); 
    }, 
    success:function(responseText, statusText, xhr, $form){ 
     $('.uploading').hide(); 
    }, 
    error:function(e){ 
    } 
}); 

function removeFile() { 
    $('.delFile').click(function() { 
     var file = $(this).data("file"); 
     for (var i=0;i<myFiles.length;i++) { 
      if (myFiles[i].name === file) { 
       myFiles.splice(i,1); 
       break; 
      } 
     } 
     console.log(myFiles); 
     $(this).parent().remove(); 
    }); 
} 

Answer 1

(document).ready(function() { 

     $("body").on("click", ".delFile", removeFile); 
    }); 


    function removeFile(e) { 
     var file = $(this).data("Image1"); 
     for (var i = 0; i < myFiles.length; i++) { 
      if (myFiles[i].name === file) { 
       myFiles.splice(i,1); 
      break; 
      } 
     } 
      $(this).parent().remove(); 

    }