Remove file from multiple upload

1

I'm doing a simple upload of multiple files. I can remove a thumbnail that I create to view, but I can not remove the file that is in input . I even put alert , confirming that I can get the file name. The problem is that it does not exclude from input .

Here's what I've done so far.

/****** Upload múltiplo ******/
$(document).ready(function() {
    if (window.File && window.FileList && window.FileReader) {
        $("#files").on("change", function(e) {
            var names = [];
            for (var j = 0; j < $(this).get(0).files.length; ++j) {
                alert($(this).get(0).files[j].name);
            }
            var nome_arquivo = "Imagem";
            var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
            var filename = $('input[type=file]').val().split('.').pop().toLowerCase();
            if ($.inArray(filename, fileExtension) == -1) {
                alert("Only formats are allowed : "+fileExtension.join(', '));
            } else {
                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;
                    $("<span class=\"pip\">" +
                    "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + nome_arquivo + "\"/>" +
                    "<br/><span class=\"remove\">Remover</span>" +
                    "</span>").insertAfter("#files");
                    $(".remove").click(function(){
                        $(this).parent(".pip").remove();
                    });
                });
                fileReader.readAsDataURL(f);
                }
            }
        });
    } else {
        alert("Seu navegador não é compatível com File API")
    }
}); 
/****** Upload múltiplo ******/ 
input[type="file"] {
    display: block;
}
.imageThumb {
    max-height: 100px;
    border: 1px solid #e6e6e6;
    padding: 1px;
}
.pip {
    display: inline-block;
    margin: 10px 10px 0 0;
}
.remove {
    display: block;
    background-color: #555;
    border:1px solid #555;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    padding: 7px 0px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
}
.remove:hover {
    background-color: #989898;
    border: 1px solid #989898;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
    <title>Steps</title>

    <link type="text/css" rel="stylesheet" href="css/style.css"> 

    <!-- Jquery -->
    <script type="text/javascript" src="https://www.agenciamove.com.br/js/jquery-1.11.2.min.js"></script><!--Boostrap--><linktype="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> 
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><divclass="container">
        <div class="row">
            <div class="field" align="left">
                <h3>Upload your images</h3>
                <input type="file" id="files" name="upload[]" onkeypress="changeTitle.call(this)" multiple="multiple" />
            </div>
       </div>
    </div>
</body>
</html>

If I upload two images for example, two blocks will appear, each with its delete button and, in the input, there will be "2 files".

When deleting the image, I would need to delete the file too, but that's what I'm having trouble with.

    
asked by anonymous 10.12.2017 / 23:30

0 answers