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

Question

我正在使用 Html 多选来选择图像并应用 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);
            }
        }

Answer 1

不幸的是，这不能像这样完成，您不能从该 html 输入元素中删除文件，因为选定的文件/图像存储在只读的 FileList 对象中:https://developer.mozilla.org/en-US/docs/Web/API/FileList

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