Discussion :

[baguiweb]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
 
})

[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").

[baguiweb]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
		}
 
	});

[Toufik83]

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

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 ?

[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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(".input-file.files").change(function(){
   .....
});

comme ça tu peux supprimer les id des input.

[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