Rebonjour,
me voila avec un nouveau problème !
j'ai suivi clairement le tuto http://www.siteduzero.com/tutoriel-3-4 [...] -loading.html

Et j'ai une érreur :
la fonction loadImg(); fonctionne très bien si je la met dans le onchange du <input type=file> et si je ne met pas la balise <form ..> !
mais si je met dans la configuration suivante, le formulaire s'envoie mais loadImg() ne ce déclenche pas

mon fichier html

<div id="boxPhoto">
	<div id="photo_1"></div>
	<div id="photo_2"></div>
	<div id="photo_3"></div>
	<div id="photo_4"></div>
</div>
<form id="uploadForm" enctype="multipart/form-data" action="upload.php" target="uploadFrame" onsubmit="loadImg();" method="post">
	<iframe id="uploadFrame" name="uploadFrame" src="#"></iframe>
	<input id="loadImg" type="file" name="loadImg" size="40" onchange="submit();" /><br />
</form>

mon javascript

function loadImg() {
	var i = "";
	if(document.getElementById("photo_1").style.backgroundImage == "") { i = 1; }
	else if(document.getElementById("photo_2").style.backgroundImage == "") { i = 2; }
	else if(document.getElementById("photo_3").style.backgroundImage == "") { i = 3; }
	else if(document.getElementById("photo_4").style.backgroundImage == "") { i = 4; }
	document.getElementById('loadImg').disabled = true;
	document.getElementById("photo_"+i).style.backgroundImage = 'url("flash_slider_load.gif")';
}

je voie vraiment pas l'erreur, on dirai que la balise <form> empêche de charger loadImg();
si vous avez des idées, je suis preneur !

edit:
si je met <input id="loadImg" type="file" name="loadImg" size="40" onchange="loadImg();submit();" />
la console d'érreur firefox me met : loadImg is not a function.

Salut.
Je vois une double action sur le formulaire : javascript & envoie.
C'est pas optimisé tout ça.
Tu veux vraiment afficher ton image ?
Parce que sinon :

<form action="upload.php" method="post">
<input type="file" name="monfichier" size="40" OnChange="submit();" /><br />
</form>

Et ensuite tu vois avec le php.

En faite j'ai suivi le tuto (ca me permet d'envoyé une image en Ajax avec l'iframe).
ma fonction loadImg me permet en faite de désactivé le formulaire d'envoi le temps que le serv me réponde, et ca permet à l'utilisateur de visualisé que le traitement est en cours.

Pourquoi ne pas afficher cette image sur le window.onbeforeunload ?

window.onbeforeunload = loadImg;

window.onbeforeunload = loadImg; ce charge lorsqu'on quitte la page si j'ai compris.
Alors que dans mon cas on ne la quitte pas, on transfert un fichier sans recharger la page.

autant pour moi j'ai mal compris

Si submit() est bien la méthode submit() du form, alors c'est normal.

L'appel de la méthode submit() n'entraîne pas le déclenchement de onsubmit().

Pourquoi tu fais pas juste

onchange="loadImg(); submit();"

avec onchange="loadImg(); submit();"
rien ne se passe, le formulaire n'es plus envoyé.
de plus la console d'erreur firefox me dit "loadImg is not a function"

edit :
si je met avec onchange="loadImg(); submit();"
et que je vire <form action="upload.php" enctype="multipart/form-data" target="uploadFrame" method="post">
ça marche mais ca n'envoie pas ! :/ lol

Il faut que tes ids soient différents de tes noms de fonction.

Donc soit tu changes le nom de la fonction loadImg, soit tu changes l'id de l'input file.

merci ca marche ^^, bizar quand même le fait d'utilisé un id identique à une fonction !

Citation : el3ctr0n

merci ca marche ^^, bizar quand même le fait d'utilisé un id identique à une fonction !

Parce que les ids deviennent des variables globales référençant les éléments.

Tiens j'avais pensé à ça, mais j'ai eu peur de dire une bêtise.
Comme quoi ...