使用 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();

    }