Discussion :

[doud180878]

Bonjour,

je suis en train de mettre en place un crop lors de l'upload d'une image. Jusqu'ici tout fonctionne bien, j'upload mon image, une boite de dialogue s'ouvre,

je redimensionne mon image, en même temps mon image apparait sur le coté de mon applic.

Impec sauf que je suis obliger de faire un f5 sur la partie administration comme sur le partie front pour l'image apparaisse redimensionné ???

Est ce que vous auriez une idée pour que mon image apparaisse directement redimensionner sans faire d'f5


Merci voici mon code :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<script type="text/javascript">
// On ouvre la boite de dialogue qui va me permettre de cropper l'image
$(function()
{
 
 
 
// On ouvre la boite de dialogue qui va me permettre de cropper l'image
$( "#box_image" ).dialog
({
     autoOpen: {autoOpen},
     show: "slide",
     height: "350",
     width: "350",
	 modal: true,
     buttons:
	    {
	       Fermer: function()
				{
					$( this ).dialog( "close" );
 				}
		},
	 close: function() { }
});
 
    	//Le bouton pour déclencher la boite d'aide
	  $(document).ready(function() {
 
        	$(window).load(function(){
        	var api = $.Jcrop('#cropbox',{
            onChange: updateCoords,
            onSelect: updateCoords,
            setSelect: [ 0, 0, 201, 113 ],
        	addClass: 'custom',
        	bgColor: 'black',
        	bgOpacity: .4,
            sideHandles: false,
            aspectRatio: 201/113
 
          });
          var isCtrl = false;
        	$(document).keyup(function (e) {
        		api.setOptions({ aspectRatio: 0 });
        		api.focus();
        		if(e.which == 17) isCtrl=false;
        	}).keydown(function (e) {
        		if(e.which == 17) isCtrl=true;
        		if(e.which == 81 && isCtrl == true) {
        			api.setOptions({ aspectRatio: 1 });
        			api.focus();
        		}
        	});
        });
        /* var width = $("#cropbox").attr("width");
        if(width != '0' && width < '950')
        {
            alert(' les dimensions ne sont pas bonnes. Elles doivent être supérieurs à 950 de longeur et 450 de hauteur');
        };*/
 
    });
 
		function updateCoords(c)
		{
			$('#handw').show();
			$('#x').val(c.x);
			$('#y').val(c.y);
			$('#w').val(c.w);
			$('#h').val(c.h);
			$('#pich').html(c.h);
			$('#picw').html(c.w);
		};
 
		function checkCoords()
		{
			if (parseInt($('#w').val())) return true;
			alert('Please select a crop region then press submit.');
			return false;
		};
 
 
 
 
});
</script>

[SpaceFrog]

reattribue le src de l'image et y ajoutant un timestamp en paramètre get

[doud180878]

Et bien voilà c'est que je viens de faire juste avant de voir ton post :

Code :

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

$img.'?'.time();

Merci

[SpaceFrog]

sinon coté serveur avec un gestion du header de l'image en lui mettant un nocache