Struts ajax et Html:file

Version imprimable

Bonjour,

J'ai un petit problème entre struts et ajax !

J'ai un formulaire que je souhaite submit et donc le traiter dans mon action struts.

Dans mon ajax j'envoie donc les données nécessaires, cependant j'ai en plus des input text un html:file.

Je ne peux pas envoyer en ajax le string du nom du fichier, il faut que dans mon formBean soit créé un formFile afin de pouvoir le récupérer ainsi dans l'action :

FormFile fichier = (FormFile) PropertyUtils.getSimpleProperty(form, "fichier");

Pour récupérer cette propriété il faut donc que je submite mon formulaire.

Existe t-il une méthode avec ajax pour submit le formulaire sans avoir à recharger la page ?

Mon code js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $(document).ready(function () { $.ajax({ type: "POST", url: "/actions/papyrus/ajaxEnregistrerZoneImage", data : "documentId=" + documentId + "&zoneId=" + zoneId + "&fichier="+fichierUploade, datatype: "xml", beforeSend: function(){ document.getElementById('enregistre') = innerHTML = '<img src="/images/ajax-loader.gif"></img> En cours de chargement.'; }, success: function(xml){ alert(xml); } }); });
Dans mon cas j'envoie juste le string fichierUploade dans le formulaire. Mais pas l'objet formFile de mon formBean

Si quelqu'un à une idée je suis preneur !

J'essaye de cette facon mais c'est pareil je ne récupère pas le formFile

Code:

1
2
3
4
5
6
7
8
9
10
11
12
		<form action="/actions/papyrus/ajaxEnregistrerZoneImage" method="post" enctype="multipart/form-data" id="formFichier">
			<input type="hidden" name="zoneId" value="test" id="zoneIdHidden"/>
			<input type="hidden" name="documentId" value="test" id="documentIdHidden"/>
			<div align="center"><h4 id="titreEditeurFichier"></h4></div>
			<div>
				 <input type="file" name="fichier" />
			</div>
			<br/>
			<div>
				<input type="submit" name="valider" value="Valider le texte"/>
			</div>
		</form>

Auquel j'ai ajouté un onSubmit en jquery :

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
$(document).ready(function () {
	$("#formFichier").submit(function () { 
		var referenceZone = formFichier.zoneId.value;
		var documentModifieId = formFichier.documentId.value;
		fichierUploade = formFichier.fichier;
		$(document).ready(function () {
			$.ajax({
				 type: "POST",
		   		 url: "/actions/papyrus/ajaxEnregistrerZoneImage",
		   		 data : "documentId=" + documentModifieId + "&zoneId=" + referenceZone,
		   		 datatype: "xml",
		   		 beforeSend: function(){
		   		 	document.getElementById('enregistre').innerHTML = '<img src="/images/ajax-loader.gif"></img> En cours de chargement.';
		   		 },
		   		 success: function(xml){
				 	alert(xml);
				 	document.getElementById('enregistre').innerHTML = 'Fichier uploadé';
			    	document.getElementById('editeurImage').style.visibility = 'hidden';
					document.getElementById('adminPapyrusEnregistrement').style.visibility = 'visible';
			     },
			     error:  function(xhr,err,e){ 
			     	document.getElementById('enregistre').innerHTML = 'Erreur dans lupload de votre fichier';
					document.getElementById('editeurImage').style.visibility = 'hidden';
					document.getElementById('adminPapyrusEnregistrement').style.visibility = 'visible';
				 }
 
			});
		});
	});
});

Tout fonctionne bien coté ajax mais c'est dans mon action que le formBean ne se populate pas avec le formFile

Bon au final j'ai utilisé un script existant

http://valums.com/ajax-upload/

Il créé une action sur votre image avec un input caché et lors de l'input il va créer une iframe pour executer le Post et donc peupler le formfile du formBean.

J'appelle donc une premiere fonction js qui applique le bouton sur chacune des images et je rapelle une fonction sur le success de la première pour mettre à jour l'image sur ma page.

Mon code js :

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
$(document).ready(function () {
	//$('#'+documentId+' .papyrusLienimagePapyrus').each(function(){
	$('.papyrusLienimagePapyrus').each(function(){
		 new AjaxUpload(this, {
		 action: urlEnregistrerZoneImage, 
			name: 'fichier',
			data: {
			 	//envoi de l'id de l'image dans le formBean et le documentId
			    documentId : documentId,
			    zoneId : this.id,
			},
			onSubmit : function(file, ext){
				$('#etatModification').html('<img src="/images/ajax-loader.gif"></img> Upload de l\'image');
				this.disable();
			},
			onComplete: function(file, response){
				this.enable();
				afficherImageUploadee(this._button.id,file);
		    },
		    error:  function(xhr,err,e){ 
		    	$('#etatModification').text('Erreur dans le chargement de votre image');
			}
		});
	});
});

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
 
L'affichage de l'image uploadée : 
 
function afficherImageUploadee(imageId,file){
	var url;
	var hauteur;
	var largeur;
	$(document).ready(function () {
		$.ajax({
			 type: "POST",
	   		 url: urlAfficherImageUploadee,
	   		 data : "imageId=" + imageId +"&documentId=" + documentId,
	   		 datatype: "xml",
	   		 beforeSend: function(){
	   		 },
	   		 success: function(xml){
	   		 //On récupère les éléments retournés par la req ajax
		    	$(xml).find('image').each(function(){
					url = $(this).find('url').text();
					hauteur = $(this).find('hauteur').text();
					largeur = $(this).find('largeur').text();
				});
	   		    $('#'+imageId).attr({ src: url });
	   		    $('#'+imageId).attr({width : largeur});
	   		    $('#'+imageId).attr({height : hauteur});
 
	   		    $('#etatModification').text('Image enregistrée : ' + file);
		     },
		     error:  function(xhr,err,e){ 
		    	$('#etatModification').text('Erreur dans le chargement de votre image');
			 }
 
		});
	});
}