11548 sujets

JavaScript, DOM et API Web HTML5

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. Smiley ravi

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 Smiley smile
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 Smiley smile

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

C'est vraiment dommage car ça oblige l'utilisateur à rescroller tout le formulaire Smiley ohwell
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. Smiley smile
salutations Smiley smile

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é Smiley smile
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 Smiley smile

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 Smiley sweatdrop
Merci beaucoup Smiley smile

Je vais regarder ça d'ici demain soir et je vous tiendra au courant, ça pourra peut-être être utile à d'autres. Smiley smile
@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... Smiley cligne
Pour HTML5, l'Api s'appelle sobrement "FileApi". On utilise les objets File et FileReader pour la récupération et l'exploitation du fichier (utilisable avec un input file ou en drag&drop). Avec la classe File tu peux obtenir le poids et le type d'un fichiers pour un contrôle utilisateur.
Pour l'upload du fichier en Ajax il faudra passer par la classe FormData.

Pour toutes les informations utiles :
https://developer.mozilla.org/en/Using_files_from_web_applications
https://developer.mozilla.org/en/DOM/XMLHttpRequest/Using_XMLHttpRequest#Using_FormData_objects

Cependant attention pour l'usage en production de ces technologies, qui bien que très pratiques, ne sont utilisables que sur les dernières versions des navigateurs. (non implémenté sur Safari 5 par exemple). Tu peux par exemple utiliser la librairie Modernizr pour une detection de ces technologies.
Modifié par moust (03 Apr 2012 - 10:32)