Bonjour à tous,

j'ai réalisé un formulaire en PHP  Symfony où l'on peut ajouter une photo et mettre un commentaire. Ma collection fonctionne.

Par contre, je dois sélectionner photo par photo et je trouve ça ch... embêtant.

Je souhaite donc créer un bouton pour sélectionner des images

<input type="file" name="file" class="file" id="files" multiple>

et y ajouter une fonction en Jquery afin de récupérer les valeurs dans l'input.

Mon problème c'est que je ne peux récupérer que la valeur du premier élément ou le nom de chaque élément sans le chemin.

var files = $('#file');
$('#file').on('change', function(e){
//je n'ai que le premier chemin
$('#file').val();

//je n'ai que les noms de fichiers
var names = $.map(files, function (val) { return val.name; });
       $.each(names, function (i, name) {
            console.log(name);
       });
});

Avez-vous une idée de comment faire pour récupérer tous les chemins?

Merci,

Bonjour,

Tu n'as pas accès ni besoin du chemin. File est un blob (ou un tableau de blobs) du (des) fichier(s) sélectionnés dans l'input.

https://developer.mozilla.org/fr/docs/Web/API/File 

https://developer.mozilla.org/fr/docs/Web/API/FileList 

Merci pour ton retour.

Mais comment puis je transférer les donnée d'un input multiple vers des input "solo"?

-
Edité par Mouakev 23 octobre 2021 à 1:01:46

Si j'ai bien compris le deuxième lien que t'a filé piero5673, si plusieurs fichiers sont mis dans l'input, tu récupère un array :

var files = document.getElementById('fileItem').files; // ceci est un array contenant des fichiers, ou des référencees à des fichiers.

Il te suffirait donc d'itérer sur ce array pour créer un nouvel input pour chaque fichiers, j'imagine ?

for( let file of files ){
  let newFileInput = document.createElement('input');
  newFileInput.setAttribute('type', 'file')
  //utilise setAttribute pour lui donner un name, un id, etc.
  newFileInput.value = file; //met chaque fichier du array dans le nouvel input créé
  
  document.getElementById('nomDuConteneur').appendChild(newFileInput); //ajoute le nouvel input dans le document ( ici dans un élément HTML, disons une div, ayant pour id 'nomDuConteneur' )
}

Je n'ai jamais essayé, donc je peux rien garantir, mais pour ma part je tenterais un truc comme ça.

Rebonjour,

Pour rappel: je veux que l'utilisateur choisisse des images. Et que chaque image va être mise dans un input généré par un prototype.

j'ai une nouvelle erreur: Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable

Et voici mon code/

    var input_file = $("#file");
    input_file.on("change", function (e) {
       let fileList = this.files;
       let clone ;
       for( let value of fileList ){
          $collectionImageHolder = $('ul.images');
            let index= addImageForm($collectionImageHolder, $newLinkLimg);
            console.log(value);
            clone = value.slice(0, value.size, value.name);
            let elementId = document.getElementById('rapport_pictures_0_imageFile_file');
            elementId.value = value;
            //$('#rapport_pictures_0_imageFile_file').value = $clone ;

            console.log($('#rapport_pictures_0_imageFile_file'));
       };
    });

Encore merci pour tout

Update: après plusieurs recherches, j'ai l'impression que c'est impossible

-
Edité par Mouakev 24 octobre 2021 à 9:29:00

Ce que tu veux faire n'est pas logique, soit tu demandes un fichier, soit tu demandes plusieurs fichiers et tu met multiple sur ton input. Rien ne t'empêche de les traiter 1 par 1 à côté si tu le souhaite. Qu'est-ce que tu veux faire avec ces inputs ?

A propos de la méthode slice, le contentType et le nom du fichier c'est deux choses différentes. Le contentType c'est le type du contenu (MIME) si tu met n'importe quoi personne ne pourras lire le fichier, si tu ne sais pas quoi mettre tu peux le laisser vide, ça devrais marcher.

Tu as raison, c'est pas terrible comme méthode. A la base, je pensais que c'était le plus simple mais visiblement pas...

Sur mon futur site, l'utilisateur pourra charger des photos et y mettre un commentaire ou une description. Je suis entrain de tester et ça me gonfle de faire photos par photo. Je voulais alors sélectionner toutes les photos en une fois et les dispatcher une par une pour ajouter les commentaires.

Je ne vois pas où est le problème. L'affichage ? Quand tu travailles avec 2 ou plus au lieu de 1, il suffit de faire une boucle :

https://jsfiddle.net/rhLq0tnb/ 

-
Edité par piero5673 26 octobre 2021 à 19:40:56