Comment puis-je supprimer un fichier de la liste de fichiers

StackOverflow https://stackoverflow.com/questions/3144419

Question

Je construis un drag-and-drop à télécharger l'application web en utilisant HTML5, et je suis tomber les fichiers sur un div et d'aller chercher bien sûr l'objet dataTransfer, ce qui me donne la FileList

Maintenant, je veux supprimer certains des fichiers, mais je ne sais pas comment, ou s'il est même possible.

De préférence, je voudrais simplement les supprimer de la liste de fichiers; Je n'ai pas utilisé pour eux. Mais si ce n'est pas possible, devrais-je écrire à la place des contrôles dans le code qui interagit avec le FileList? Cela semble compliqué.

Était-ce utile?

La solution

Si vous voulez supprimer uniquement plusieurs des fichiers sélectionnés: vous ne pouvez pas. API du fichier de travail Projet liée à contient une note:

  

L'interface HTMLInputElement   [HTML5] a un readonly FileList   attribut, [...]
  [Souligné]

Lecture un peu du projet 5 de travail HTML, je suis tombé sur API élément commun de input . Il semble que vous pouvez supprimer le ensemble liste des fichiers en définissant la propriété value de l'objet input à une chaîne vide, comme: 

document.getElementById('multifile').value = "";

BTW, l'article Utilisation des fichiers à partir d'applications Web pourraient également intéresser.

Autres conseils

Cette question a déjà été marquée répondu, mais je voudrais partager quelques informations qui pourraient aider les autres à l'utilisation FileList.

Il serait commode de traiter une liste de fichiers comme un tableau, mais les méthodes comme genre, changement, pop et tranche ne fonctionnent pas. Comme d'autres l'ont suggéré, vous pouvez copier la liste de fichiers à un tableau. Cependant, plutôt que d'utiliser une boucle, il y a une solution simple de ligne un pour gérer cette conversion. 

 // fileDialog.files is a FileList 

 var fileBuffer=[];

 // append the file list to an array
 Array.prototype.push.apply( fileBuffer, fileDialog.files ); // <-- here

 // And now you may manipulated the result as required

 // shift an item off the array
 var file = fileBuffer.shift(0,1);  // <-- works as expected
 console.info( file.name + ", " + file.size + ", " + file.type );

 // sort files by size
 fileBuffer.sort(function(a,b) {
    return a.size > b.size ? 1 : a.size < b.size ? -1 : 0;
 });

OK Testé en FF, Chrome, et IE10 +

Si vous visez à feuilles persistantes navigateurs (Chrome, Firefox, Edge, mais fonctionne également dans Safari 9+) ou vous pouvez vous permettre un polyfill, vous pouvez transformer la liste de fichiers dans un tableau en utilisant Array.from() comme ceci: 

let fileArray = Array.from(fileList);

Ensuite, il est facile à manipuler le tableau de Files comme tout autre tableau.

Puisque nous sommes dans le domaine de HTML5, c'est ma solution. L'essentiel est que vous poussez les fichiers vers un tableau au lieu de les laisser dans une liste de fichiers, puis en utilisant XHR2, vous poussez les fichiers vers un objet FormData. Exemple ci-dessous. 

Node.prototype.replaceWith = function(node)
{
    this.parentNode.replaceChild(node, this);
};
if(window.File && window.FileList)
{
    var topicForm = document.getElementById("yourForm");
    topicForm.fileZone = document.getElementById("fileDropZoneElement");
    topicForm.fileZone.files = new Array();
    topicForm.fileZone.inputWindow = document.createElement("input");
    topicForm.fileZone.inputWindow.setAttribute("type", "file");
    topicForm.fileZone.inputWindow.setAttribute("multiple", "multiple");
    topicForm.onsubmit = function(event)
    {
        var request = new XMLHttpRequest();
        if(request.upload)
        {
            event.preventDefault();
            topicForm.ajax.value = "true";
            request.upload.onprogress = function(event)
            {
                var progress = event.loaded.toString() + " bytes transfered.";
                if(event.lengthComputable)
                progress = Math.round(event.loaded / event.total * 100).toString() + "%";
                topicForm.fileZone.innerHTML = progress.toString();
            };
            request.onload = function(event)
            {
                response = JSON.parse(request.responseText);
                // Handle the response here.
            };
            request.open(topicForm.method, topicForm.getAttribute("action"), true);
            var data = new FormData(topicForm);
            for(var i = 0, file; file = topicForm.fileZone.files[i]; i++)
                data.append("file" + i.toString(), file);
            request.send(data);
        }
    };
    topicForm.fileZone.firstChild.replaceWith(document.createTextNode("Drop files or click here."));
    var handleFiles = function(files)
    {
        for(var i = 0, file; file = files[i]; i++)
            topicForm.fileZone.files.push(file);
    };
    topicForm.fileZone.ondrop = function(event)
    {
        event.stopPropagation();
        event.preventDefault();
        handleFiles(event.dataTransfer.files);
    };
    topicForm.fileZone.inputWindow.onchange = function(event)
    {
        handleFiles(topicForm.fileZone.inputWindow.files);
    };
    topicForm.fileZone.ondragover = function(event)
    {
        event.stopPropagation();
        event.preventDefault();
    };
    topicForm.fileZone.onclick = function()
    {
        topicForm.fileZone.inputWindow.focus();
        topicForm.fileZone.inputWindow.click();
    };
}
else
    topicForm.fileZone.firstChild.replaceWith(document.createTextNode("It's time to update your browser."));

J'ai trouvé très rapide et courte pour cette solution de contournement. Testé dans de nombreux navigateurs (Chrome, Firefox, Safari);

D'abord, vous devez convertir FileList à un tableau 

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

pour supprimer l'utilisation d'élément particulier ce 

newFileList.splice(index,1);

Je sais que c'est une vieille question, mais il est bon classement sur les moteurs de recherche en ce qui concerne cette question.

propriétés dans le FileList objet ne peut pas être supprimé, mais au moins sur Firefox ils peuvent changer . Ma solution ce problème était d'ajouter un IsValid=true de propriété à ces fichiers qui sont passés à vérifier et IsValid=false ceux qui ne l'ont pas.

alors je viens de parcourir la liste pour vous assurer que seules les propriétés avec IsValid=true sont ajoutés à FormData .

Il est peut-être un moyen de faire plus élégante mais voici ce que ma solution. Avec Jquery 

fileEle.value = "";
var parEle = $(fileEle).parent();
var newEle = $(fileEle).clone()
$(fileEle).remove();
parEle.append(newEle);

Fondamentalement, vous Taquet la valeur de l'entrée. Clone et mettre le clone à la place de l'ancien.

Ceci est extemporanée, mais j'ai eu le même problème que je résolu de cette façon. Dans mon cas, je télécharger les fichiers via demande XMLHttp, donc je suis en mesure d'afficher les données clonés FileList par appending formdata. La fonctionnalité est que vous pouvez glisser et déposer ou sélectionner plusieurs fichiers autant de fois que vous le souhaitez (fichiers de sélection à nouveau ne réinitialise pas le clone FileList), supprimer tout fichier que vous voulez dans la liste de fichiers (clone), et soumettre par XMLHttpRequest ce qui restait là. Voici ce que je faisais. Il est mon premier post ici si le code est un peu désordonné. Pardon. Ah, et je devais utiliser à la place de jQuery $ comme il était dans le script Joomla. 

// some global variables
var clon = {};  // will be my FileList clone
var removedkeys = 0; // removed keys counter for later processing the request
var NextId = 0; // counter to add entries to the clone and not replace existing ones

jQuery(document).ready(function(){
    jQuery("#form input").change(function () {

    // making the clone
    var curFiles = this.files;
    // temporary object clone before copying info to the clone
    var temparr = jQuery.extend(true, {}, curFiles);
    // delete unnecessary FileList keys that were cloned
    delete temparr["length"];
    delete temparr["item"];

    if (Object.keys(clon).length === 0){
       jQuery.extend(true, clon, temparr);
    }else{
       var keysArr = Object.keys(clon);
       NextId = Math.max.apply(null, keysArr)+1; // FileList keys are numbers
       if (NextId < curFiles.length){ // a bug I found and had to solve for not replacing my temparr keys...
          NextId = curFiles.length;
       }
       for (var key in temparr) { // I have to rename new entries for not overwriting existing keys in clon
          if (temparr.hasOwnProperty(key)) {
             temparr[NextId] = temparr[key];
             delete temparr[key];
                // meter aca los cambios de id en los html tags con el nuevo NextId
                NextId++;
          }
       } 
       jQuery.extend(true, clon, temparr); // copy new entries to clon
    }

// modifying the html file list display

if (NextId === 0){
    jQuery("#filelist").html("");
    for(var i=0; i<curFiles.length; i++) {
        var f = curFiles[i];
        jQuery("#filelist").append("<p id=\"file"+i+"\" style=\'margin-bottom: 3px!important;\'>" + f.name + "<a style=\"float:right;cursor:pointer;\" onclick=\"BorrarFile("+i+")\">x</a></p>"); // the function BorrarFile will handle file deletion from the clone by file id
    }
}else{
    for(var i=0; i<curFiles.length; i++) {
        var f = curFiles[i];
        jQuery("#filelist").append("<p id=\"file"+(i+NextId-curFiles.length)+"\" style=\'margin-bottom: 3px!important;\'>" + f.name + "<a style=\"float:right;cursor:pointer;\" onclick=\"BorrarFile("+(i+NextId-curFiles.length)+")\">x</a></p>"); // yeap, i+NextId-curFiles.length actually gets it right
    }        
}
// update the total files count wherever you want
jQuery("#form p").text(Object.keys(clon).length + " file(s) selected");
    });
});

function BorrarFile(id){ // handling file deletion from clone
    jQuery("#file"+id).remove(); // remove the html filelist element
    delete clon[id]; // delete the entry
    removedkeys++; // add to removed keys counter
    if (Object.keys(clon).length === 0){
        jQuery("#form p").text(Object.keys(clon).length + " file(s) selected");
        jQuery("#fileToUpload").val(""); // I had to reset the form file input for my form check function before submission. Else it would send even though my clone was empty
    }else{
        jQuery("#form p").text(Object.keys(clon).length + " file(s) selected");
    }
}
// now my form check function

function check(){
    if( document.getElementById("fileToUpload").files.length == 0 ){
        alert("No file selected");
        return false;
    }else{
        var _validFileExtensions = [".pdf", ".PDF"]; // I wanted pdf files
        // retrieve input files
        var arrInputs = clon;

       // validating files
       for (var i = 0; i < Object.keys(arrInputs).length+removedkeys; i++) {
         if (typeof arrInputs[i]!="undefined"){
           var oInput = arrInputs[i];
           if (oInput.type == "application/pdf") {
               var sFileName = oInput.name;
               if (sFileName.length > 0) {
                   var blnValid = false;
                   for (var j = 0; j < _validFileExtensions.length; j++) {
                     var sCurExtension = _validFileExtensions[j];
                     if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                       blnValid = true;
                       break;
                     }
                   }
                  if (!blnValid) {
                    alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                    return false;
                  }
              }
           }else{
           alert("Sorry, " + arrInputs[0].name + " is invalid, allowed extensions are: " + _validFileExtensions.join(" or "));
           return false;
           }
         }
       }

    // proceed with the data appending and submission
    // here some hidden input values i had previously set. Now retrieving them for submission. My form wasn't actually even a form...
    var fecha = jQuery("#fecha").val();
    var vendor = jQuery("#vendor").val();
    var sku = jQuery("#sku").val();
    // create the formdata object
    var formData = new FormData();
    formData.append("fecha", fecha);
    formData.append("vendor", encodeURI(vendor));
    formData.append("sku", sku);
    // now appending the clone file data (finally!)
    var fila = clon; // i just did this because I had already written the following using the "fila" object, so I copy my clone again
    // the interesting part. As entries in my clone object aren't consecutive numbers I cannot iterate normally, so I came up with the following idea
    for (i = 0; i < Object.keys(fila).length+removedkeys; i++) { 
        if(typeof fila[i]!="undefined"){
            formData.append("fileToUpload[]", fila[i]); // VERY IMPORTANT the formdata key for the files HAS to be an array. It will be later retrieved as $_FILES['fileToUpload']['temp_name'][i]
        }
    }
    jQuery("#submitbtn").fadeOut("slow"); // remove the upload btn so it can't be used again
    jQuery("#drag").html(""); // clearing the output message element
    // start the request
    var xhttp = new XMLHttpRequest();
    xhttp.addEventListener("progress", function(e) {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
        }, false);
        if ( xhttp.upload ) {
            xhttp.upload.onprogress = function(e) {
                var done = e.position || e.loaded, total = e.totalSize || e.total;
                var percent = done / total;
                jQuery("#drag").html(Math.round(percent * 100) + "%");
            };
        }
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
         var respuesta = this.responseText;
         jQuery("#drag").html(respuesta);
        }
      };
      xhttp.open("POST", "your_upload_handler.php", true);  
      xhttp.send(formData);
    return true;
    }
};

Maintenant, le code html et styles pour cela. Je suis tout à fait un débutant, mais tout cela en fait travaillé pour moi et m'a pris un certain temps pour comprendre. 

<div id="form" class="formpos">
<!--    Select the pdf to upload:-->
  <input type="file" name="fileToUpload[]" id="fileToUpload" accept="application/pdf" multiple>
  <div><p id="drag">Drop your files here or click to select them</p>
  </div>
  <button id="submitbtn" onclick="return check()" >Upload</button>
// these inputs are passed with different names on the formdata. Be aware of that
// I was echoing this, so that's why I use the single quote for php variables
  <input type="hidden" id="fecha" name="fecha_copy" value="'.$fecha.'" />
  <input type="hidden" id="vendor" name="vendorname" value="'.$vendor.'" />
  <input type="hidden" id="sku" name="sku" value="'.$sku.'"" />
</div>
<h1 style="width: 500px!important;margin:20px auto 0px!important;font-size:24px!important;">File list:</h1>
<div id="filelist" style="width: 500px!important;margin:10px auto 0px!important;">Nothing selected yet</div>

Les styles pour cela. Je devais marquer certains d'entre eux! Important pour remplacer le comportement Joomla. 

.formpos{
  width: 500px;
  height: 200px;
  border: 4px dashed #999;
  margin: 30px auto 100px;
 }
.formpos  p{
  text-align: center!important;
  padding: 80px 30px 0px;
  color: #000;
}
.formpos  div{
  width: 100%!important;
  height: 100%!important;
  text-align: center!important;
  margin-bottom: 30px!important;
}
.formpos input{
  position: absolute!important;
  margin: 0!important;
  padding: 0!important;
  width: 500px!important;
  height: 200px!important;
  outline: none!important;
  opacity: 0!important;
}
.formpos button{
  margin: 0;
  color: #fff;
  background: #16a085;
  border: none;
  width: 508px;
  height: 35px;
  margin-left: -4px;
  border-radius: 4px;
  transition: all .2s ease;
  outline: none;
}
.formpos button:hover{
  background: #149174;
  color: #0C5645;
}
.formpos button:active{
  border:0;
}

J'espère que cette aide.

Si vous avez la chance d'être l'envoi d'une demande après la base de données avec les fichiers et vous avez les fichiers que vous souhaitez envoyer dans votre DOM

vous pouvez simplement vérifier si le fichier dans la liste des fichiers est présent dans votre DOM, et bien sûr si cela ne vous envoyez pas seulement cet élément de de DB.

Merci @Nicholas Anderson simple et droite, voici votre code appliqué et travailler à mon code en utilisant jquery.

HTML. 

<input class="rangelog btn border-aero" id="file_fr" name="file_fr[]" multiple type="file" placeholder="{$labels_helpfiles_placeholder_file}">
<span style="cursor: pointer; cursor: hand;" onclick="cleanInputs($('#file_fr'))"><i class="fa fa-trash"></i> Empty chosen files</span>

JS CODE 

   function cleanInputs(fileEle){
    $(fileEle).val("");
    var parEle = $(fileEle).parent();
    var newEle = $(fileEle).clone()
    $(fileEle).remove();
    $(parEle).prepend(newEle);
}

Vous pouvez créer un tableau et utiliser à la place de la liste de fichiers en lecture seule. 

var myReadWriteList = new Array();
// user selects files later...
// then as soon as convenient... 
myReadWriteList = FileListReadOnly;

Après ce point faire votre ajout contre votre liste au lieu de la construction dans la liste. Je ne suis pas sûr du contexte dans lequel vous travaillez, mais je travaille avec un plug-in jquery j'ai trouvé et ce que je devais faire était de prendre la source du plug-in et le mettre dans la page en utilisant les balises <script>. Ensuite, au-dessus de la source, j'ai ajouté mon tableau pour qu'il puisse agir en tant que variable globale et le plug-in pourrait référencer.

Ensuite, il était juste une question d'échanger les références.

Je pense que cela vous permettra d'ajouter également glisser-déposer comme nouveau, si la liste prédéfinie est en lecture seule alors comment pourriez-vous obtenir les fichiers est tombé dans la liste?

:))

je change juste le type d'entrée au texte et dans le fichier: D

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top