Javascript 上传前删除图像预览

我上传了多张图片并显示预览，效果很好。当我想删除一个特定的预览图像时，预览图像会被删除，但当我上传时，所有文件都会被上传。请查收

我的表格：

<div class="form-group">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-5">
            Upload a file(.csv,.xls,.xlsx)
        </div> 
        <div class="col-sm-12 col-md-6 col-lg-7">
            <input type="file" class="form-control" id="gallery-photo-add" name="projectfile[]" multiple>
            <div class="gallery">
            </div>        
        </div> 
    </div>
</div>

上载文件（.csv、.xls、.xlsx）

Javascript

$(function() {
    var imageArray = [];
    var imagesPreview = function(input, placeToInsertImagePreview) {
        var data = '';
        if (input.files) {
            var filesAmount = input.files.length; 

            for (let i = 0; i < filesAmount; i++) {
                data +='<li>'+ input.files[i].name + '</li>';

                var reader = new FileReader();
                reader.onload = function(event) {
                    var image = '<a class="delete" data-value='+ i +'><img class="images" src='+ event.target.result +'><i class="fas fa-times closeicon" aria-hidden="true"></i> </a>';
                    $($.parseHTML(image))
                        .appendTo(placeToInsertImagePreview);
                }   
                // console.log(input.files);
                reader.readAsDataURL(input.files[i]);
                imageArray.push(input.files[i]);
                console.log(imageArray);    
            } 
        }
    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });

    $("div.gallery").on('click','.delete',function(){
        // console.log($(this).data("value"));
        $(this).remove();
        imageArray.splice($(this).data("value"),1);
        console.log(imageArray);
     });
});

$（函数（）{
var imageArray=[]；
var imagesPreview=函数（输入，放置到插入图像预览）{
var数据=“”；
if（input.files）{
var filesamunt=input.files.length；
for（设i=0；i'；
var reader=new FileReader（）；
reader.onload=函数（事件）{
var图像=“”；
$（$.parseHTML（图像））
.附件（placeToInsertImagePreview）；
}   
//console.log（input.files）；
reader.readAsDataURL（input.files[i]）；
push（input.files[i]）；
log（imageArray）；
} 
}
};
$（“#画廊照片添加”）。在（'change'，function（）上{
影像预览（本“图库”）；
});
$（“div.gallery”）。在（'单击'，'删除'，函数（）上{
//log（$（this.data（“value”））；
$（this.remove（）；
imageArray.splice（$（this）.data（“值”），1）；
log（imageArray）；
});
});

多输入类型文件返回一个只读文件列表。它包含

文件

对象的集合。因此，你不能简单地从这个列表中删除一个元素

---

您必须使用AJAX来处理表单。参考问题。

您可以在文件更改中使用addEventListener作为document.querySelector（“#文件”）。addEventListener（'change'，handleFileSelect，false）；-然后在handleFileSelect函数中提交表单。