Discussion :

[gtraxx]

Bonjour, je ne sais pas comment expliquer mon petit problème.
En faites je fais un upload d'une image avec une requête de type post.
Jusque la pas de probléme....
Seulement l'image ne change pas (logique) et je suis obliger de recharger la page pour voir la modification.
Je me demande comment faire pour recharger la div qui contient mon image ou un équivalent propre avec rechargement de la page courante
Bref vos conseils sont précieux

[Invité]

salut,

lorsque tu as fait ton upload dimage qui est jimagine dans un iframe ou qqch dautre.
Dans cet iframe, il faut que tu genere l'image avec un nom style
<img src="monImage.jpg?10003409094" alt=""/>

Ca a pour but de faire charger la nouvelle image au navigateur.

[gtraxx]

je n'utilise pas d'iframe pour l'envoi d'image, un formulaire plutôt classique avec l'image juste en dessous.
Pensez vous que je doivent faire une requête get ou un load pour charger cette image et lors de l'envoi refaire une requête ?

[marcha]

Salut,

J'ai de la peine à saisir la technique que tu utilises pour uploader ton image, tu peux
donner un peu de code ?

[gtraxx]

Pour le moment, je recharge la page après envoi :

Code :

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
 
function updateProgress() {
	  var progress;
	  progress = $("#progressbar")
	    .progressbar("option","value");
	  if (progress <= 100) {
	      $("#progressbar")
	        .progressbar("option", "value", progress + 1);
	      $("#progressText").text(progress+"%");
	      setTimeout(updateProgress, 100);
	  }
	  if(progress>=100){
		  location.reload();
	  }
	  return false;
	}
		$('<div class="filesystem"></div>').insertAfter('span.photo');
		$('.filesystem').empty();
		$(':checkbox#addimg').click(function(){
	 		if(this.checked){
	 			jQuery('<input type="file" id="photo" name="photo" value="" />').appendTo(".filesystem");
	 		}else{
	 			jQuery('.filesystem').empty();
	 		}
	 	});
$('#subimg').click(function(){
$('#profil-photo').ajaxSubmit({
			 	url:"http://test.dev",
			 	type:"post",
			 	beforeSubmit:function(){
		 		$("#progressbar").progressbar({ value: 0 });
			 	setTimeout(updateProgress, 100);
			 	}
			});
})

Code :

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
43
<form class="forms-profil" method="post" action="" enctype="multipart/form-data" id="profil-photo">
	<fieldset>
		<table>
		<tr>
			<td class="label"><label for="addimg">Photo :</label></td>
		</tr>
		<tr>
			<td>
			<table>
				<tr>
					<td style="width:400px;">
						<div id="progressbar"></div>
					 	<div id="progressText"></div>
					 </td>
				</tr>
			</table>
			<table>
				<tr>
					<td style="width:250px;">
						<input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
				 		<input type="checkbox" name="addimg" id="addimg" value="" />&nbsp;<span class="photo">Envoyer une Photo</span>
				 	</td>
				 	<td>&nbsp;</td>
				 	<td style="width:250px;" class="errorInput"></td>
			 	</tr>
			 	<tr>
			 	<td><input type="submit" name="saddimg" class="ud-button ui-state-default ui-corner-all" value="envoyer" id="subimg" /></td>
			 	</tr>
		 	</table>
			</td>
		</tr>
		<tr>
			<td class="status"></td>
		</tr>
		<tr>
			<td valign="top">
				<img style="margin:4px 0 0 5px;" src="/monimage.gif" width="" height="" alt="photo" />
			</td>
			<td style="width:100px;"></td>
		</tr>
	</table>
	</fieldset>
	</form>

C'est en gros quoi mais recharger l'image

Code :

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

<img style="margin:4px 0 0 5px;" src="/monimage.gif" width="" height="" alt="photo" />

pour remplacer le src me semble peut être une bonne idée cela m'éviterai de recharger toute la page comme indiquer dans la fonction updateProgress

[marcha]

Salut,

Je n'ai encore jamais trouvé de solution d'upload qui n'utilise pas la technique
du ciblage du formulaire dans un iframe (a pars avec des plugins tel que flash
ou java)

Est-tu bien sur de ce que tu es en train de faire ?

[onirisme]

Bonjour,

Il faut que tu utilise l'option "success" de jQuery.ajax

Voir la doc et les exemples sur le site de jQuery...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$('#subimg').click(function(){
    $.ajax({
	url:"http://test.dev",
	type:"post",
	beforeSubmit:function(){
		$("#progressbar").progressbar({ value: 0 });
		setTimeout(updateProgress, 100);
	},
        success: function(){
            $("#idImage").attr('src',da)
        }
    });
});