Supprimer une liste de Fichiers point à partir d'un multiple d'entrée“: le fichier”

J'ai ce DOM:

var id = 0;

$('input:file#upload')[0].files[ id ]

Qui se le premier fichier sur le 0e index. Les propriétés du fichier sont répertoriés et toutes les œuvres, mais...

Comment supprimer des éléments dans le DOM de la [object FileList] avec JavaScript?

Double Possible de Comment faire pour supprimer un fichier sélectionné à partir de l'entrée de contrôle de fichier

OriginalL'auteur | 2013-06-05

  1. 10

    Je' crains que vous ne pouvez pas supprimer des objets d' FileList object directement. Suffit d'attribuer $('input:file#upload')[0].files à un Array et puis supprimer des éléments à partir de ce tableau à l'aide de splice ou de la méthode de votre choix, puis l'utiliser Array.

    eh bien j'ai besoin de les retirer de la File d'attente de Téléchargement, pas à partir d'une copie de cette liste... est-ce possible ?
    Vous ne pouvez pas supprimer des fichiers à partir de FileList mais comme je l'ai dit que tout ce que vous voulez est d'attribuer ces file objects de FileList dans un array et puis vous pouvez faire quelque chose avec eux. Maintenant, cette solution dépend si vous voulez télécharger des fichiers via Ajax or via Soumettre le Formulaire. If you suppose to upload files via Ajax`, puis le Array solution fonctionne parfaitement, comme vous l'avez même file objects avec exactement le même propriétés.
    Hm... oui, vous avez raison... je peut juste lire les fichiers avec FileReader 🙂 merci de ces conseils mate!
    Mon plaisir :-). Il semble donc que vous n'avez pas vraiment envie de télécharger des fichiers, mais les intéressés à faire certaines choses utiles à Côté Client par la lecture de leur contenu :-).
    Pas De Pas De! Je veux télécharger des fichiers. J'ai été en utilisant ce tutoriel: net.tutsplus.com/tutorials/javascript-ajax/... - Et c'est ma première rencontre lors de la négociation et de la manipulation de la input:file element et à l'aide de la FileReader classe. Merci néanmoins! 🙂 Cheers!

    OriginalL'auteur Imran Latif

  2. 1

    J'ai trouvé très rapide & court de solution pour cela. Testé dans de nombreux navigateurs (Chrome, Firefox, Safari);

    Tout d'abord, vous devez convertir les Fichiers vers un Tableau

    var newFileList = Array.from(event.target.files);

    pour supprimer l'élément en particulier l'utilisation de cette

    newFileList.splice(index,1);
    D'où vient l'indice de venir?
    index d'un fichier que vous souhaitez supprimer à partir de ce tableau

    OriginalL'auteur Vicky

  3. 0

    Pas, Nous pouvons le rendre amovible.
    Je l'ai fait et cela fonctionne certainement.

    Vous devez d'abord initialiser ces variables 

    var newImageObj = [];
var ImageNo = 0;

    Puis écrire ce code dans le fichier d'entrée du changement

    $("#exampleInputFileProduct").change(function () {
var fileUpload = document.getElementById("exampleInputFileProduct");
//$("#mainImages").html('');
//$("#subImages").html('');
if (typeof (FileReader) != "undefined") {
//Here Check File Extension
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png)$/;
for (var i = 0; i < fileUpload.files.length; i++) {
var j = 0;
var file = fileUpload.files[i];
var NewFile = fileUpload.files[i];
//Here Check File Size 1MB = 1000000 Bytes
if (file.size < 2048000) {
if (regex.test(file.name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
if ($("#mainImages").find(".item").attr("id") == "FirstSlider") {
$("#mainImages").html('');
$("#subImages").html('');
$("#subImages").append("<div class='item active'></div>");
}
if ($("#mainImages").find(".item").hasClass("active")) {
$("#mainImages").append("<div class='item " + ImageNo + "_CClass\'><i class='fa fa-times customIcon' onclick='RemoveImage(\"" + ImageNo + "_CClass\",\"" + fileUpload.files[j].name.toLowerCase() + "\")'></i><img class='CImage' src='" + e.target.result + "' alt='' /></div>");
} else {
$("#mainImages").append("<div class='item active " + ImageNo + "_CClass'><i class='fa fa-times customIcon' onclick='RemoveImage(\"" + ImageNo + "_CClass\",\"" + fileUpload.files[j].name.toLowerCase() + "\")'></i><img class='CImage' src='" + e.target.result + "' alt='' /></div>");
}
//if ($("#subImages").find(".item").length == 0) {
//   $("#subImages").append("<div class='item active'></div>");
//} else {
if (($("#subImages").find(".item").find("div").length / 5) >= $("#subImages").find(".item").length) {
$("#subImages").append("<div class='item'></div>");
}
//}
var append = 0;
$.each($("#subImages").find(".item"), function (p, pelement) {
if (append == 0) {
if ($(pelement).find("div").length != 5) {
var newID = $(pelement).find("div").length;
newID = newID;
$(pelement).append("<div onclick='LoadImage(\"" + ImageNo + "_CClass\")' data-slide-to='" + newID + "' class='thumb " + ImageNo + "_CClass'> <img src='" + e.target.result + "' alt=''></div>");
append = append + 1;
}
}
})
j = j + 1;
ImageNo = ImageNo + 1;
}
newImageObj.push(file);
reader.readAsDataURL(file);
}
}
}
} else {
alert("This browser does not support HTML5 FileReader.");
}
});

    Puis à la fin de cette 2 fonctions aidera à faire le reste

    function LoadImage(objclass) {
$("#mainImages").find(".item").removeClass("active");
$("#mainImages").find("." + objclass + "").addClass("active");
}
function RemoveImage(objclass, ImageName) {
$.each(newImageObj, function (e, element) {
if ($(this)[0].name.toLowerCase().trim() == ImageName.trim()) {
newImageObj.pop(this);
}
});
$("#mainImages").find("." + objclass + "").remove();
$("#subImages").find(".item").find("." + objclass + "").remove();
if ($("#mainImages").find(".item").length == 0) {
$("#mainImages").append("<div class='item active'><i class='fa fa-times customIcon'></i><img class='CImage' src='/Content/img/DefaultProduct.gif' alt='' /></div>");
$("#subImages").append("<div class='item active'><div data-target='#carousel' data-slide-to='0' class='thumb'> <img src='/Content/img/DefaultProduct.gif' alt=''></div></div></div>");
} else {
$("#mainImages").find(".item").removeClass("active");
$("#mainImages").find(".item:first-child").addClass("active");
$("#subImages").find(".item").removeClass("active");
$("#subImages").find(".item:first-child").addClass("active");
}
}

    Au dernier lorsque vous soumettez votre formulaire de prendre les fichiers à partir de la matrice de

    OriginalL'auteur Rush.2707