Как удалить изображение из входного файла, когда я удаляю его из l oop?

Question

У меня есть этот модал, который содержит файл ввода для загрузки нескольких изображений, с изображениями предварительного просмотра, каждое изображение содержит флажок и кнопку удаления:

Что Мне нужно, чтобы при удалении любого изображения я хотел удалить это изображение из входного файла.

Мой jQuery код:

   $(document).ready(function() {

if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
        var files = e.target.files,
        filesLength = files.length;
        for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
            var file = e.target;
            var html = 
            "<div class=\"col-md-6\">" +
            "<div class=\"images_card\">" +
            "<div class=\"img\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "</div>"+
            "<div class=\"btn_s\">"+
            "<div class=\"radio\">"+
            "<label><input type=\"radio\" name=\"main_image\" value=\"1\" checked>Main Image</label>"+
            "<span class=\"btn danger remove delete-product\">"+
                "<i class=\"sicon-trash\"></i>"+
            "</span>"+
            "</div>"+
            "</div>"+ 
            "</div>";
            "</div>";

            $('.row_modal').append(html);

            $(".remove").click(function(){

             $(this).closest(".col-md-6").remove();

             //here I'm trying to remove but it remove all of them :(
             // $('#files').val('');

            });

        });
        fileReader.readAsDataURL(f);
        }
    });
}
});

Answer 1

Чтобы удалить указанное c изображение, вы должны использовать класс кнопки удаления и выбрать, какой div нужно удалить. В данном случае я только что сделал пример для вашей проблемы.

$('#file').change(function(e){
  var files = e.target.files,
        filesLength = files.length;
        for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
            var file = e.target;
            var html = "<div class='images'><img width='200' height='280' src='"+e.target.result+"' title='"+file.name+"'/><button class='remove-pic'>Remove</button></div>"; 

            $('#container').append(html);

        });
        fileReader.readAsDataURL(f);
        }
})

В событии remove btn используйте это 'on' при выборе указанного элемента c с использованием его класса:

$(document).on('click', '.remove-pic', function(){
  $(this).parent('div.images').fadeOut();
})

Это HTML выглядит так:

<div id="container"></div>
<input id="file" type="file" value="File" name="file[]" multiple></input>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Вы также можете обратиться к этому jsfiddle

Answer 2

Создайте массив для отслеживания списка добавляемых файлов и используйте то же имя файла, чтобы открыть элемент из списка дорожек, который находится в массиве. После удаления определенного элемента установите значение для элемента file как массив дорожек.

let file  = [] //list of images

//Push the image name to file array
//use the same name as id of that image while appending it to html DOM
file.push("img1");

//To Delete the from file list too
//Use the id to delete from array
let idx = file.indexOf(id);
if(idx >=0) {
   file.splice(idx, 1);
}