Déclencher l'upload sur plusieurs boutons

Version imprimable

Bonjour,

J'ai une page avec 2 boutons pour le téléchargement de fichiers via jquery mais qui ont un id différent car les fichiers copies doivent corresponde à des dossiers différents.
Hors le déclenchement de la sélection des fichiers ne fonctionnent pas ?

Avez-vous une idée ? Merci
Code:

1 2 <input class="input-file files" type="file" name="files[]" id="files-1" data-info="infos-1" multiple> <input class="input-file files" type="file" name="files[]" id="files-2" data-info="infos-2" multiple>
Code:

1 2 3 4 5 6 7 8 9 $('#loading').hide(); $("id^=files-").change(function(){ var files = $(this)[0].files; var infos = $(this).attr("data-infos"); var error = ''; var form_data = new FormData(); form_data.append('infos', infos); })

15/01/2020, 13h10
Toufik83

Salut,

Tu ne vois pas une erreur dans la console ?, genre Uncaught Error: Syntax error, unrecognized expression: id^=files- ?

remplace "id^=files-" par "[id^='files-']" et il y a un S en trop dans attr("data-infos").

OK J'ai remplacé $("id^=files-").change(function(){ par $("[id^='files-']").change(function(){ mais je n'ai plus la fenêtre window de sélection de fichiers qui s'affiche.

Voici le code JS complet
merci

Code:

1
2
3
<input class="input-file files" type="file" name="files[]" id="files-0" data-immat="AA-123-AA" multiple>
<input class="input-file files" type="file" name="files[]" id="files-1" data-immat="BB-123-BB" multiple>
<input class="input-file files" type="file" name="files[]" id="files-2" data-immat="CC-123-CC" multiple>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$('#loading').hide();
	// $("#files").change(function(){
	$("[id^='files-']").change(function(){
		var files = $(this)[0].files;
		var immat = $(this).attr("data-immat");
		var error = '';
		var form_data = new FormData(); 
		form_data.append('immat', immat);
 
		for(var count = 0; count<files.length; count++){
			var name = files[count].name;
			var extension = name.split('.').pop().toLowerCase();
			if(jQuery.inArray(extension, ['gif','png','jpg','jpeg','pdf']) == -1){
				error += "Fichier "+name+" invalide à la copie";
			}else{
				form_data.append("files[]", files[count]);
			}
		}
 
		if(error == ''){
			$.ajax({
				url: "/_web/dossiers/upload_files",
				method: "POST",
				data: form_data,
				contentType: false,
				cache: false,
				processData: false,
				dataType: 'json',
				beforeSend:function(){
					$('#loading').show().html("Chargement des fichiers en cours...");
				},
				success:function(data){
					$('#loading').hide();
					$('ul#pieces_'+data.immat).append(data.files_upload);
					$('#files').val('');
				}
			})
		}else{
			alert(error);
		}
 
	});

15/01/2020, 13h51
Toufik83

Citation:

Envoyé par baguiweb

mais je n'ai plus la fenêtre window de selection de fichiers qui s'affiche.

:weird: :koi: là je ne vois pas le rapport entre la fenêtre de sélection de fichiers et les erreurs js.

tu n'as pas essayé sur un autre navigateur ?
15/01/2020, 14h17
baguiweb

Je suis pas défaut sous Chrome, J'ai essayé avec Firefox et même souci rencontré... Étrange
Si je change $("#files").change(function(){ tout fonctionne bien
15/01/2020, 14h29
Toufik83
Ok peut être que tu utilises une version différente de jQuery ou peut être autre chose que je n’arrives pas à l'identifier pour le moment.

Mais on peut éviter ce genre de syntaxe et utiliser les classes :
Code:

1 2 3 4 $(".input-file.files").change(function(){ ..... });
comme ça tu peux supprimer les id des input.
15/01/2020, 14h32
baguiweb

OK j'ai trouvé le souci, c'était un problème de CSS qui ciblait un # fixe et non dynamique.
Merci pour votre aide je cloture la discussion
bonne journée