Good day, I'm trying to delete an index of an array of in input type file but in the different tests that I have done or delete the first or the last one even using splice
.
var arrayFiles = [];
$("#fileUpload").on('change', function () {
var countFiles = $(this)[0].files.length;
var array = (this.files.length);
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder");
var numero = -1;
if (extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
var j = 0;
var reader = new FileReader();
var file = fileUpload.files[i]
reader.onload = function (e) {
numero++
image_holder.append("<div class='col-md-3 images'><img class='img-fluid img-thumbnail' height='500px' src='" + e.target.result + "'><i class='fas fa-times eliminar' data-borrar='"+ fileUpload.files[j].name.toLowerCase() +"'></i></div>")
j = j + 1;
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
arrayFiles.push(file)
}
} else {
alert("Navegador no soporta FileReader.");
}
} else {
alert("Solo imagenes");
}
console.log(arrayFiles)
});
$(document).on('click', '.eliminar', function(event) {
var elementoEliminar = $(this).data('borrar')
alert(elementoEliminar)
$(this).parent().remove();
var elementoEliminado = arrayFiles.splice(elementoEliminar , 1);
console.log(elementoEliminado)
console.log(arrayFiles)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fileUpload" type="file" multiple />
<div id="image-holder" class="row"></div>