JavaScript supprimer le fichier de la liste des fichiers à télécharger

il y a le code https://jsfiddle.net/bfzmm1hc/1 tout a l'air bien mais je veux supprimer certains des fichiers de l'ensemble.

j'ai déjà trouvé ceci:

je sais cet objet FileList est en lecture seule, donc je peux simplement copier les fichiers dans un nouveau tableau. Mais que dois-je faire avec ce nouveau tableau d'objets File ? Je ne peux pas l'affecter à la propriété files ...

2
demandé sur Community 2016-05-31 16:10:06

2 réponses

comme vous ne pouvez pas éditer L'attribut Read Only input.files , vous devez télécharger un formulaire en utilisant XMLHttpRequest et envoyer un FormData objet . Je vais aussi vous montrer comment utiliser URL.createObjectURL pour obtenir plus facilement un URI de l'objet File :

var SomeCl = {
  count: 0,
  init: function() {
    $('#images').change(this.onInputChange);
  },
  onInputChange: function() {
    // reset preview
    $('.container').empty();
    // reset count
    SomeCl.count = 0;
    // process files
    SomeCl.processFiles(this.files, function(files) {
      // filtered files
      console.log(files);

      // uncomment this line to upload the filtered files
      SomeCl.upload('url', 'POST', $('#upload').get(0), files, 'images[]');
    });
  },
  processFiles: function(files, callback) {
    // your filter logic goes here, this is just example

    // filtered files
    var upload = [];

    // limit to first 4 image files
    Array.prototype.forEach.call(files, function(file) {
      if (file.type.slice(0, 5) === 'image' && upload.length < 4) {
        // add file to filter
        upload.push(file);
        // increment count
        SomeCl.count++;
        // show preview
        SomeCl.preview(file);
      }
    });

    callback(upload);
  },
  upload: function(method, url, form, files, filename) {
    // create a FormData object from the form
    var fd = new FormData(form);
    // delete the files in the <form> from the FormData
    fd.delete(filename);
    // add the filtered files instead
    fd.append(filename, files);

    // demonstrate that the entire form has been attached
    for (var key of fd.keys()) {
      console.log(key, fd.getAll(key));
    }

    // use xhr request
    var xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    xhr.addEventListener('progress', function(e) {
      console.log('lengthComputable', e.lengthComputable);
      console.log(e.loaded + '/' + e.total);
    });
    xhr.addEventListener('load', function(e) {
      console.log('uploaded');
    });
    xhr.addEventListener('error', function(e) {
      console.log('this is just a demo');
    });
    xhr.send(fd);
  },
  preview: function(file) {
    // create a temporary URI from the File
    var url = URL.createObjectURL(file);
    // append a preview
    $('.container').append($('<img/>').attr('src', url));
  }
};

SomeCl.init();
.container img {
  max-width: 250px;
  max-height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="upload">
  <input name="other" type="hidden" value="something else">
  <input name="images[]" id="images" multiple="multiple" type="file">
  <div class="container"></div>
</form>
1
répondu Patrick Roberts 2016-05-31 14:25:54

j'ai trouvé une solution. Cela ne nécessitera pas D'AJAX pour la requête et le formulaire peut être envoyé au serveur. En gros, vous pouvez créer une entrée hidden ou text et définir l'attribut value à la chaîne de caractères base64 créée après le traitement du fichier sélectionné.

<input type=hidden value=${base64string} />

vous envisagerez probablement l'idée de créer un fichier d'entrée multiple au lieu de text ou hidden . Cela ne fonctionnera pas car nous ne pouvons pas attribuer une valeur .

Cette méthode va inclure le fichier d'entrée dans les données envoyées à la base de données et d'ignorer le fichier d'entrée, vous pouvez:

  • dans la partie arrière, ne tenez pas compte du champ;
  • vous pouvez définir l'attribut disabled au fichier d'entrée avant de sérialiser le formulaire;
  • supprimer L'élément DOM avant d'envoyer des données.

quand vous voulez supprimer un fichier juste obtenir l'indice de l'élément et de supprimer l'élément d'entrée (texte ou cachés) du DOM.

exigences:

  • vous devez écrire la logique pour convertir les fichiers dans base64 et stocker tous les fichiers à l'intérieur d'un tableau chaque fois que le fichier d'entrée déclenche l'événement change .

Pour:

  • beaucoup de contrôle et vous pouvez filtrer, comparer des fichiers, vérifier la taille des fichiers, type MIME, et ainsi de suite..
1
répondu Michael Mammoliti 2017-08-30 11:16:45