javascript - 如何从预览中删除选定的图像？

Question

我在互联网上找到了一个上传多张图片的代码。当您选择图像时，它会在下方显示所选图像作为预览，现在的问题是如果我选择了错误的图像并且我想删除该特定图像，而且应该允许不超过 4 张图像希望你明白我下面要说的就是代码

<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>

代码的jquery是

    $(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

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

Answer 1

HTML5 文件输入的文件列表是只读的。因此无法从多个文件选择中删除单个文件。

通过重置表单来清空文件输入是完全没问题的。你只是不能修改它。因此，如果您使用 4 个单独的单个文件选择，清除用户正在删除的文件是一件简单的事情:

HTML:

<form>
    <input type="file" name='images[]' class="gallery-photo-add" id='image1' />
    <input type="file" name='images[]' class="gallery-photo-add" id='image2' />
    <input type="file" name='images[]' class="gallery-photo-add" id='image3' />
    <input type="file" name='images[]' class="gallery-photo-add" id='image4' />
</form>
<div class="gallery"></div>

JS:

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(placeToInsertImagePreview) {

        // Empty preview so we can safely rebuild it
        $(placeToInsertImagePreview).empty();

        // Get all files
        var elems = document.getElementsByClassName("gallery-photo-add");

        // Loop through each file and append them to the preview if available
        for (i = 0; i < elems.length; i++) {
            if (elems[i].files.length != 0) {
                var reader = new FileReader();
                var id = $(elems[i]).attr('id');

                reader.onload = (function(id) {
                    return function(e){
                        $($.parseHTML('<img>')).attr({
                            'src' : e.target.result,
                            'data-id' : id
                        }).appendTo(placeToInsertImagePreview);
                    }
                })(id);

                reader.readAsDataURL(elems[i].files[0]);
            }
        }
    };

    // Temporarely wrap a form element around the input to reset it
    window.reset = function(e) {
        e.wrap("<form>").closest('form').get(0).reset();
        e.unwrap();
    }

    $('div.gallery').on('click', 'img', function() {
        var id = $(this).attr("data-id");
        reset($('#'+id));
        $(this).remove();
    });

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

您可以在这里进行测试:https://jsfiddle.net/81nytqsc/2/