web-dev-qa-db-fra.com

Comment supprimer un fichier sélectionné spécifique du contrôle de fichier d'entrée

Comment supprimer un fichier sélectionné spécifique du contrôle de fichier d'entrée?

J'ai un contrôle de fichier d'entrée avec la possibilité de sélectionner plusieurs fichiers; Cependant, je veux valider un fichier et s'il a une mauvaise extension, je dois le supprimer du contrôle de fichier lui-même. Est-ce possible?

J'ai essayé comme ci-dessous

<input type="file" name="fileToUpload" id="fileToUpload" multiple/>


<script> $("#fileToUpload")[0].files[0] </script>

Ci-dessous la capture d'écran de l'objet mais je ne peux pas le modifier.

enter image description here

javascriptjqueryfile-uploadmultifile
42
Navin Leon

Comme d'autres personnes l'ont souligné, FileList est en lecture seule. Vous pouvez contourner ce problème en plaçant ces fichiers dans un Array séparé. Vous pouvez ensuite faire ce que vous voulez avec cette liste de fichiers organisée. Si vous souhaitez les télécharger sur un serveur, vous pouvez utiliser l'API FileReader .

Vous trouverez ci-dessous un moyen d'éviter complètement de devoir modifier le FileList. Pas:

  1. Ajouter un écouteur d'événement de modification d'entrée de fichier normal
  2. Boucle à travers chaque fichier de l'événement de changement, filtre pour la validation souhaitée
  3. Pousser les fichiers valides dans un tableau séparé
  4. Utiliser FileReader API pour lire les fichiers localement
  5. Soumettre des fichiers valides et traités au serveur

Gestionnaire d'événements et code de boucle de fichier de base:

var validatedFiles = [];
$("#fileToUpload").on("change", function (event) {
  var files = event.originalEvent.target.files;
  files.forEach(function (file) {
    if (file.name.matches(/something.txt/)) {
      validatedFiles.Push(file); // Simplest case
    } else { 
      /* do something else */
    }
  });
});

Vous trouverez ci-dessous une version plus compliquée de la boucle de fichiers qui montre comment utiliser l'API FileReader pour charger le fichier dans le navigateur et éventuellement le soumettre à un serveur sous la forme d'un blob codé en Base64.

  files.forEach(function (file) {
    if (file.name.matches(/something.txt/)) { // You could also do more complicated validation after processing the file client side
      var reader = new FileReader();
      // Setup listener
      reader.onload = (function (processedFile) {
        return function (e) {
          var fileData = { name : processedFile.name, fileData : e.target.result };

          // Submit individual file to server
          $.post("/your/url/here", fileData);

          // or add to list to submit as group later
          validatedFiles.Push(fileData);
        };
      })(file);

      // Process file
      reader.readAsDataURL(file);
    } else { 
      /* still do something else */
    }
  });

Une note de prudence sur l'utilisation de FileReader API. Le codage Base64 d’un fichier augmentera sa taille d’environ 30%. Si cela n'est pas acceptable, vous devrez essayer autre chose.

38
Andrew Hubbs

Je pensais que je devrais ajouter mon commentaire ici aussi ici (j'ai répondu ici: JavaScript supprime le fichier de la liste à télécharger )

J'ai trouvé une solution de contournement. Cela ne nécessitera pas AJAX pour la requête et le formulaire peut être envoyé au serveur. Vous pouvez créer une entrée hidden ou text et la définir c'est value attribut à la chaîne base64 créée après le traitement du fichier sélectionné.

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

Vous envisagerez probablement de créer plusieurs fichiers d'entrée à la place de l'entrée text ou hidden. Cela ne fonctionnera pas car nous ne pouvons pas lui attribuer de valeur.

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

  • dans le back-end, ne considérez pas le champ;
  • vous pouvez définir l'attribut disabled dans le fichier d'entrée avant de sérialiser le formulaire;
  • supprimez l'élément DOM avant d'envoyer des données.

Lorsque vous souhaitez supprimer un fichier, obtenez simplement l'index de l'élément et supprimez l'élément d'entrée (texte ou masqué) du DOM.

Conditions requises:

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

Avantages:

  • Cela vous donnera essentiellement beaucoup de contrôle et vous pourrez filtrer, comparer des fichiers, vérifier la taille du fichier, le type MIME, etc.
4
Michael Mammoliti