Javascript 如何使用api请求从文件列表中删除图像并将其上载到服务器上？

我正在使用Html multi-select来选择图像，并应用javascript来显示图像。正如您在这张图片中所看到的，每个图像的顶部都有一个十字，用于从UI中删除图像。 所以，如果在显示的三张图片中，我删除其中一张并上传到服务器上，它将上传所有三张图片，而不是两张图片

我的剧本：

   $(document).on('click', '.browse', function () {
            var file = $(this).parent().parent().parent().find('.file');
            file.trigger('click');
        });
        $(document).on('change', '.file', function () {
            $(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, ''));
        });

        function handleFileSelect(evt) {
            var files = evt.target.files; // FileList object
            // Loop through the FileList and render image files as thumbnails.
            for (var i = 0, f; f = files[i]; i++) {
                if (i > 3) {

                    break;
                }

                                var reader = new FileReader();

                // Closure to capture the file information.
                reader.onload = (function (theFile) {
                    return function (e) {
                        // Render thumbnail.
                        var span = document.createElement('span');
                        span.innerHTML = ['<img class="thumbs_image" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/> <a href="#" class="remove_pic">X</a>'
                        ].join('');
                        document.getElementById('list').insertBefore(span, null);

                        span.children[1].addEventListener("click", function (event) {
                            span.parentNode.removeChild(span);


                        });
                    };
                })(f);

                // Read in the image file as a data URL.
                reader.readAsDataURL(f);
            }
        }

$（文档）.on（'click'，'browse'，函数（）{
var file=$（this.parent（）.parent（）.parent（）.find（'.file'）；
file.trigger（'click'）；
});
$（document）.on（'change'，'.file'，函数（）{
$（this.parent（）.find（'.form control'）.val（$（this.val（）.replace（/C:\\fakepath\\/i，）；
});
功能手柄文件选择（evt）{
var files=evt.target.files；//文件列表对象
//循环浏览文件列表并将图像文件渲染为缩略图。
for（var i=0，f；f=files[i]；i++）{
如果（i>3）{
打破
}
var reader=new FileReader（）；
//闭包以捕获文件信息。
reader.onload=（函数（文件）{
返回函数（e）{
//渲染缩略图。
var span=document.createElement（'span'）；
span.innerHTML=[''
].加入（“”）；
document.getElementById（'list'）.insertBefore（span，null）；
子类[1]。addEventListener（“单击”），函数（事件）{
parentNode.removeChild（span）；
});
};
})（f） )；
//作为数据URL读入图像文件。
reader.readAsDataURL（f）；
}
}

不幸的是，不能这样做，您不能从html输入元素中删除文件，因为选定的文件/图像存储在只读文件列表对象中：

---

作为替代方案，您可以保留自己的文件数组，但随后需要使用自己的实现来上载文件。

您能否指导整个实现，以了解如何删除该对象列表。如果可能的话。提前谢谢