Как удалить файлы из input multiple на JS?

Question

подскажите пожалуйста как удалить добавленные изображения из input multiple на JS ES6?

например я добавляю 4 картинки

Удаляю 2 изображения, но они не удаляются. Как было 4 изображения так и осталось..

в реквесте после отправки формы все те же 4 изображения

Подскажите пожалуйста как реализовать данное удаление?

Скрипт на фидле https://jsfiddle.net/usdbuy/1kfxu8en/1/

if (window.File && window.FileList && window.FileReader) {
    document.getElementById('photos').addEventListener('change', function(e) {
        let photos = e.target.files,
            photosLength = photos.length;

        for (let i = 0; i < photosLength; i++) {
            let f = photos[i];

            let fileReader = new FileReader();
            fileReader.onload = (function(e) {
                let file = e.target;

                document.getElementById('pips').insertAdjacentHTML('afterbegin',
                    `<span class="pip">
                  <img class="imageThumb" src="${e.target.result}" title="${file.name}"/>
                      <br/>
                  <span class="remove">Удалить</span>
               </span>`
                );

                document.getElementById('pips')
                    .querySelector('.remove')
                    .addEventListener('click', function() {
                        this.parentElement.remove();
                    });
            });
            fileReader.readAsDataURL(f);
        }
    });
} else {
    alert("Your browser doesn't support to File API")
}

input[type="file"] {
    display: block;
}

.imageThumb {
    max-height: 75px;
    border: 1px solid $color-border;
    padding: 1px;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.pip {
    display: inline-block;
    margin: 10px 10px 0 0;
    width: 110px;
    height: 80px;
}


.remove {
    display: block;
    color: black;
    text-align: center;
    cursor: pointer;
}

.remove:hover {
    background: white;
    color: black;
}

<!DOCTYPE html>
    <html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="field" align="left">
            <h3>Upload your images</h3>
            <input type="file" id="photos" name="files[]" multiple />
            <div id="pips"></div>
          </div>
    </body>
</html>

БЛОГ НА HUSL

Как удалить файлы из input multiple на JS?

Ответы (0 шт):