Uploader un fichier sans recharger la page.

Bonjour à tous,

Il y a des sujets pour lesquels je sais que je vais vraiment galérer et je sens que celui-ci en sera un.

En fait, j'ai un formulaire qui permet d'uploader des fichiers. C'est un formulaire Html avec un script PHP derrière, qui upload mes fichiers. Maintenant ce que j'aimerai, en jQuery, c'est que le fichier soit transféré automatiquement, sans forcément valider le formulaire, dès lors qu'un fichier est sélectionné.

Voici l'extrait Html :

					<p class="background_ececec"><label for="transaction_file">Ajouter un nouveau document :</label> <input type="file" name="transaction_file" id="transaction_file" /> <input type="submit" name="file_submit" value="Transferer ce document" class="input_submit" id="file_submit" /></p>

Vous l'aurez compris, lorsque l'utilisateur clique sur "Transférer ce document", ça valide le formulaire afin d'uploader le fichier. En Html/PHP ça fonctionne bien.

Je suis parvenu sans grande difficulté à déceler un clique sur ce bouton en jQuery :

	$('#formFinances #file_submit').click(function() {
		alert('ok');
		$.ajax({
			contentType: 'application/x-www-form-urlencoded',
			dataType: 'html',
			url: 'core/ajax/financesUpload.php',
			type: 'POST',
			error: function() {
				alert('erreur');
			},
			success: function(content) {
				alert(content);
			}
		});
		return false;
	});

La page Ajax nommée "financesUpload.php" est également prête pour tester l'envoi ; le seul élément qui me manque c'est en fait de ... simuler une validation lors du clique. Car à présent, impossible de récupérer le fichier uploadé par la page ajax.

Savez-vous comment faire ?
Merci d'avance
Modifié par Gaylord.P (01 Apr 2012 - 17:38)

Bonjour,

Pour télécharger un fichier de manière asynchrome, tu devras utiliser une <iframe> ou du Flash.

Il y a également une API en HTML 5 mais le nom m'échappe... Mais les techniques offrant réellement un meilleur support ne se font pas seulement en Javascript (malheureusement).

Salut et merci d'avoir répondu

Donc si j'ai bien compris, il est impossible de valider un fichier sans recharger la page en jQuery ?

C'est vraiment dommage car ça oblige l'utilisateur à rescroller tout le formulaire

Oui, c'est pourquoi si tu veux éviter Flash, la technique consistant à utiliser un <iframe> est la plus solide !

Tu peux aussi regarder du côté des APIs HTML5 (si je ne dis pas de bêtise, c'est le file API qui t'intéressera)

Un tutoriel ici: http://www.sitepoint.com/html5-ajax-file-upload/

Ensuite, il te suffira de trouver une technique s'adaptant aux différents browser.

Il y a à ce sujet de très bonnes réponses sur ce tread de StackOverflow:

http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery

Merci beaucoup pour tes conseils, je vais évaluer la réelle nécessite de ce que je veux et ce qui est disponible. Encore merci.

salutations

J'ai pas forcément tout compris sur l'utilité...

Mais voici un script pour uploader des images...
Pour l'utiliser je sais qu'il n'y a pas de flash, que c'est du Jquery et du php et qu'il n'ya pas de rechargement de page...

Ce serait donc en gros ce que tu cherches sauf que toi c'est pour des fichiers... mais finalement des images ou des fichiers, c'est plus ou moins la même chose, sachant que je charge des swf qui ne sont pas des images mais plutot des fichiers...

voilà .. espérant t'avoir aidé

Dans le titre, tu dis "sans recharger la page" mais dans le post, j'ai plutôt l'impression que c'est surtout "sans cliquer sur un submit" qui t'importe. Si c'est la deuxième, alors il suffit de déclencher le submit du formulaire lors de l'événement onchange du input file.

Salut et merci pour vos réponses

pchlj, je pense que tu as oublié de mettre le lien du script dont tu parles ^^

Non je confirme que c'est bien sans recharger la page que je souhaite ; si effectivement ça upload sans même appuyer sur le bouton "Transférer", tant mieux, mais ce que j'aimerais c'est qu'il se transfère sans recharger la page.

En fait, le script permet d'uploader un nombre illimité de fichiers. Et les utilisateurs en uploaderont sans doute plusieurs. Donc les forcer à chaque fois de recharger la page à chaque nouveau fichier, c'est réellement galère

oups au temps pour moi oui en effet

https://github.com/blueimp/jQuery-File-Upload

désolé

Merci beaucoup

Je vais regarder ça d'ici demain soir et je vous tiendra au courant, ça pourra peut-être être utile à d'autres.

@jb.. uploadify est pas mal son soucis est qu'il utilise un fichier swf...

alors que pour quelque chose de similaire le jqueryfileupload de blueimp n'en utilise pas... c'est js, ajax et php ... deplus il est portable, asp et autres langages...

Exact, j'ai testé ton script, il a l'air très bien à première vue.