Javascript添加删除多个图像上载

我正在创建添加删除图像上载。当我添加1个图像的文件时，它将自动创建新的输入文件属性，而无需单击按钮（仅单击输入属性）

当我单击

del

图标删除图像的文件时，图像的预览已被删除，但图像的输入属性仍然存在，并且结果所有图像的文件提交都包括删除的图像

你能帮我修改这个javascript吗？这样当我删除图像时，它也会删除属于它的图像的输入属性

var-abc=0；
$（文档）.ready（函数（）{
$（'body'）。在（'change'，'#file'，函数（）上{
if（this.files&&this.files[0]）{
abc+=1；
$（本）。在（“”）之前；
var reader=new FileReader（）；
reader.onload=imagesisload；
reader.readAsDataURL（this.files[0]）；
//$（this.hide（）；
$（“#abcd”+abc）.append（$（“”，{id:'filediv'}）.fadeIn（'slow'）.append(
$（“”，{name:'file[]，键入：'file'，id:'file'}）
));
});
//预览图像
函数imageIsLoaded（e）{
$（'#previewimg'+abc）.attr（'src'，e.target.result）；
};
});

#文件{
颜色：绿色；
填充：5px；边框：1px虚线#123456；
背景色：#f9ffe5；
}
#x{
宽度：17px；
高度：17px；
边界：无；
左边距：-20px；
页边顶部：1px；
光标：指针；
位置：绝对位置；
}
.abcd img{
高度：100px；
宽度：100px；
填充物：5px；
边框：1px实心rgb（232、222、189）；
}

---

重写太多了，但我可以指出代码中的两个问题：

层次结构：您一直在上一个文件上载div中创建div。这些“应该”是同级而不是子级。将内容附加到

.parent（）

元素

ID:s应该是唯一的。如果文件上载元素和filediv都具有相同的ID，请尝试向这些新创建的元素添加

abc

递增变量

---

尝试下面的代码，我已经将所有id属性更改为class属性，因为不能为不同的元素创建相同的id。id总是唯一的

var-abc=0；
$（文档）.ready（函数（）{
$（'body'）。在（'change'，'.file'，function（）上{
if（this.files&&this.files[0]）{
abc+=1；
$（本）。在（“”）之前；
var reader=new FileReader（）；
reader.onload=imagesisload；
reader.readAsDataURL（this.files[0]）；
//$（this.hide（）；
$（“#abcd”+abc）.append（$（“”，{class:'filediv'}）.fadeIn（'slow'）.append(
$（“”，{name:'file[]，类型：'file'，类：'file'}）
));
});
//预览图像
函数imageIsLoaded（e）{
$（'#previewimg'+abc）.attr（'src'，e.target.result）；
};
})；

文件{
颜色：绿色；
填充：5px；边框：1px虚线#123456；
背景色：#f9ffe5；
}
.删除图标{
宽度：17px；
高度：17px；
边界：无；
左边距：-20px；
页边顶部：1px；
光标：指针；
位置：绝对位置；
}
.abcd img{
高度：100px；
宽度：100px；
填充物：5px；
边框：1px实心rgb（232、222、189）；
}

• 演示：

您的代码完全重写并完全正常工作

   var files = [];
    $(document).on('change', '#file', function() {

        var index = $('.file-wrapper').length ? $('.file-wrapper:last-child').data('index') + 1 : 0;

        if (this.files) {

            console.log('files', this.files);

            $.each(this.files, function(i, file) {

                var reader = new FileReader();

                files[index] = file;

                var template = '<div id="file-wrapper-%d" data-index="%d" class="col-4 file-wrapper">' +
                    '<div class="card p-2">' +
                    '<div class="card-header p-2"><strong>' +
                    file.name +
                    '</strong></div><div class="card-body p-2 text-center">' +
                    '<img src="%s" class="img-fluid" alt="" style="max-height:150px" /></div>' +
                    '<div class="card-footer p-2">' +
                    '<a href="#" data-index="%d" class="float-left delete-image btn btn-sm btn-danger"><i class="fas fa-trash-alt"></i></a>' +
                    '<strong class="float-right">' +
                    formatSizeUnits(file.size) +
                    '</strong>' +
                    '</div>' +
                    '</div></div>';


                reader.onload = function(e) {

                    console.log('reader', reader, e);

                    // create the form data object
                    // and pass some additional parameters

                    var data = new FormData();
                    data.append('fileName', file.name);
                    data.append('fileIndex', index);
                    data.append('fileBlob', reader.result);
                    data.append('action', 'upload');

                    // upload to server
                    $.ajax({
                        type: 'POST',
                        url: 'api.php',
                        data: data,
                        processData: false,
                        contentType: false
                    }).done(function(json) {
                        console.log('ajax:upload', json);
                        $('#files-wrapper').append(template.replace(/(%d)/g, index).replace(/(%s)/g, reader.result));
                        $("#file-wrapper-" + index).fadeIn(200);
                        index++;
                    });
                }
                reader.readAsDataURL(file);
            });
        }
    });

var文件=[]；
$（document）.on（'change'，'#file'，function（）{
var index=$（'.file wrapper'）。长度？$（'.file wrapper:last child'）。数据（'index'）+1:0；
if（this.files）{
console.log（'files'，this.files）；
$.each（this.files，function（i，file）{
var reader=new FileReader（）；
文件[索引]=文件；
变量模板=“”+
'' +
“”+
文件名+
“”+
'' +
'' +
'' +
“”+
formatSizeUnits（file.size）+
“”+
'' +
'';
reader.onload=函数（e）{
console.log（'reader'，reader，e）；
//创建表单数据对象
//并传递一些附加参数
var data=new FormData（）；
data.append（'fileName'，file.name）；
data.append（'fileIndex'，index）；
data.append（'fileBlob'，reader.result）；
data.append（'action'，'upload'）；
//上传到服务器
$.ajax({
键入：“POST”，
url:'api.php'，
数据：数据，
processData:false，
contentType:false
}).done（函数（json）{
log（'ajax:upload'，json）；
$（“#文件包装器”）.append（template.replace（/（%d）/g，index.replace（/（%s）/g，reader.result））；
$（“#文件包装器-”+索引）.fadeIn（200）；
索引++；
});
}
reader.readAsDataURL（文件）；
});
}
});

• 请参阅css代码的演示源代码

---

如果您将我的html/css/js代码与您的html/css/js代码进行比较，您就会知道我所做的区别：-）您好，我已经完全重写了您的代码并制作了一个可用的演示，以便您可以更进一步..！希望它能帮助您查看您的演示链接。请更新您的演示链接。@sanoj lawrence:tnx为了指出问题，我已经更新了代码…让我确认一下我能告诉你吗