[AJAX] Manipuler Images avec Simple AJAX Code-Kit (SACK)

Bonjour,

Je suis en train d'apprendre à utiliser Simple AJAX Code-Kit (SACK) et je tente d'uploader dans la page une image via un formulaire mais je n'arrive pas !

Je tourne en rond...

Voici le code que j'utilise dans la page principale :

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
<script type="text/javascript" charset="utf-8">
 
	var ajax = new sack();
 
	function whenCompleted(){
	//alert("toto");
	var e = document.getElementById('imageContainer'); 
	if (ajax.responseStatus){
		var string = ajax.response;
	} else {
		var string = "<p>URLString Sent: " + ajax.URLString + "</p>";
	}
	e.innerHTML = string;	
	}
 
	function send_img(){
		var form = document.getElementById('uploadForm');
		ajax.encVar("uploadImage",form.Upload.value);
		ajax.requestFile = "upload.php";
		ajax.method = "POST";
		ajax.element = 'imageContainer';
		ajax.onCompletion = whenCompleted;
		ajax.runAJAX();
	}
 
	</script>
 
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadForm" name="uploadForm">
Image : <input type="file" id="uploadImage" name="uploadImage" />
<input type="submit" value="Upload" onClick="send_img(); return false;" onDblClick="send_img(); return false;" />
</form>
 
<div id="imageContainer"></div>

Et le traitement dans un fichier PHP a part :

Code:

1
2
3
4
5
6
7
8
9
$filename = basename($_FILES['uploadImage']['name']);
$ext = strtolower(substr($filename, strrpos($filename, '.') + 1));
$newName = 'images/'.time().'.'.$ext;
move_uploaded_file($_FILES['uploadImage']['tmp_name'], $newName);
 
list($width, $height) = getimagesize($newName);
 
$string = '<img id="image_" src="'.$newName.'" width="'.$width.'" height="'.$height.'" alt="" />';
echo $string;

Il affiche l'ipage mais dans le fichier PHP et non pas en dans la page appelante !????

Merci d'avance,

L