Uploader une Image sans cliquer sur Submit par fungio - page 1

Bonjour a tous.

A l'aide d'un tuto sur le net j'ai réussi à utiliser a faire un formulaire qui upload une image en Ajax.

Ca marche bien mais moi j'aimerais pouvoir adapter ce code pour que l'utilisateur n'ai pas besoin de cliquer sur le input[type=submit] pour uploader l'image. J'ai essayer de mettre un onchange dans le input[type=file] mais ça ne marche pas

une idée ??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Iframe Ajax</title>
	<script type="text/javascript" src="webtoolkit.aim.js"></script>
	<script type="text/javascript">
		function startCallback() {
			// make something useful before submit (onStart)
			return true;
		}
 
		function completeCallback(response) {
			// make something useful after (onComplete)
			document.getElementById('nr').innerHTML = parseInt(document.getElementById('nr').innerHTML) + 1;
			document.getElementById('r').innerHTML = response;
		}
		
	</script>
</head>
 
<body>
 
	<form action="index.php" method="post" name="formImage" enctype="multipart/form-data" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback})">
		<div><label>File:</label> <input type="file" name="image" /></div>
		<div><input type="submit" value="SUBMIT" /></div>
	</form>
 
	<hr/>
 
	<div># of submited forms: <span id="nr">0</span></div>
	<div>last submit response (generated by form action - index.php file): <pre id="r">
</pre>
</div>
 
</body>
</html>

/**
*
*  AJAX IFRAME METHOD (AIM)
*  http://www.webtoolkit.info/
*
**/
 
AIM = {
 
	frame : function(c) {
 
		var n = 'f' + Math.floor(Math.random() * 99999);
		var d = document.createElement('DIV');
		d.innerHTML = '<iframe style="display:none" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\')"></iframe>';
		document.body.appendChild(d);
 
		var i = document.getElementById(n);
		if (c && typeof(c.onComplete) == 'function') {
			i.onComplete = c.onComplete;
		}
 
		return n;
	},
 
	form : function(f, name) {
		f.setAttribute('target', name);
	},
 
	submit : function(f, c) {
		AIM.form(f, AIM.frame(c));
		if (c && typeof(c.onStart) == 'function') {
			return c.onStart();
		} else {
			return true;
		}
	},
 
	loaded : function(id) {
		var i = document.getElementById(id);
		if (i.contentDocument) {
			var d = i.contentDocument;
		} else if (i.contentWindow) {
			var d = i.contentWindow.document;
		} else {
			var d = window.frames[id].document;
		}
		if (d.location.href == "about:blank") {
			return;
		}
 
		if (typeof(i.onComplete) == 'function') {
			i.onComplete(d.body.innerHTML);
		}
	}
 
}

<?php
	if (!empty($_FILES['image']['size'])) {
		//On d&eacute;finit les variables :
		
		$extensions_valides = array( 'jpg' , 'jpeg' , 'gif' , 'png', 'bmp' ); //Liste des extensions valides
		
		if ($_FILES['image']['error'] > 0)
		{
			$i++;
			$messageError .= "Erreur lors du tranfsert de l'image : <br />";
		}
		
		$extension_upload = strtolower(substr(  strrchr($_FILES['image']['name'], '.')  ,1));
		if (!in_array($extension_upload,$extensions_valides) )
		{
			$i++;
			$messageError .= "Extension de l'image incorrecte.<br />";
		}
		
		if($i == 0) {
			//On d&eacute;place l'avatar
			$image = 'avatar';
			$image = "../../images/avatar/".str_replace(' ','',$image).".".$extension_upload;
			
			move_uploaded_file($_FILES['image']['tmp_name'],$image);
			$img_url = $image;
		}
	} else {
		$error++;
		$messageError .= 'Vous n\'avez selectionn&eacute; aucune image<br />';
	}
	
	if($error > 0) 
		echo $messageError;
	else 
		echo '<img src="'.$img_url.'" />';
?>

fungio

6 mars 2010 à 2:16:52

Nesk

6 mars 2010 à 2:36:48

Comment ça le onchange ne marche pas ? x)

Après tu n'as qu'à adapter le code, l'envoi du formulaire se fait de la façon suivante :

form.submit();

6 mars 2010 à 3:10:51

j'ai essayé avec un onchange="submit()" mais ça me redirige vers index.php (le champ action du formulaire) au lieu de me laisser sur index.html

Golmote

6 mars 2010 à 10:30:04

onchange="AIM.submit(this.form, {'onStart' : startCallback, 'onComplete' : completeCallback})"

6 mars 2010 à 12:37:47

non j'avais déja essayé, rien ne se passe.

6 mars 2010 à 14:48:33

Quand rien ne se passe, y'a souvent des erreurs...

Et les erreurs elles apparaissent dans la Console d'erreurs...

(Outils -> Console d'erreurs sous Firefox)

Uploader une Image sans cliquer sur Submit

Uploader une Image sans cliquer sur Submit

Supprimer

Modérer

Signaler le message aux modérateurs