Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

Ajax et Upload - part 1

Si vous faites un peu de JavaScript l'Ajax, vous savez certainement que l'on ne peut pas envoyer un fichier : un <input type="file" /> via une requête XMLHttpRequest. Je vous avez déjà parlé d'une solution ici : upload avec Ajax. Mais intéressons nous d'un peu plus prêt au fonctionnement.

Tout d'abord comment fonctionne un upload normal, en HTML, sans Ajax ni quoi que ce soit ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> </head> <body> <form action="Default4.aspx" enctype="multipart/form-data" method="post"> <input type="file" id="file1" name="file1" /> <input type="submit" id="btn1" value="Envoyer" /> </form> </body> </html>

L'attribut enctype est nécessaire pour envoyer des fichiers binaires en HTTP, ceci est spécifié dans la RFC 2388.

Ce que l'on veut maintenant c'est envoyer le fichier sans recharger toute la page. L'attribut target de la balise form permet d'envoyer le formulaire dans une autre frame/iframe, on va donc envoyer notre formulaire dans une iframe.

<body> <form action="Default4.aspx" enctype="multipart/form-data" method="post" target="hiddeniframe"> <input type="file" id="file1" name="file1" /> <input type="submit" id="btn1" value="Envoyer" /> </form> <iframe name="hiddeniframe" src="about:blank"></iframe> </body>

Maintenant, lorsque l'on clique sur le bouton "envoyer", toute la page ne se rafraichit pas, seulement l'iframe. On aimerait bien avoir un message à coté du bouton qui indique que le fichier a bien été envoyé. Pour cela notre iframe doit communiquer avec sa page parente.

Tout d'abord rajoutons un peu de JavaScript dans la page parente :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script type="text/javascript"> var CS = {}; CS.UploadAjax = function(){} CS.UploadAjax.callBack = function(message){ document.getElementById('messageCallBack').innerHTML = message; } </script> </head> <body> <form action="Default4.aspx" enctype="multipart/form-data" method="post" target="hiddeniframe"> <input type="file" id="file1" name="file1" /> <input type="submit" id="btn1" value="Envoyer" /> <div id="messageCallBack"></div> </form> <iframe name="hiddeniframe" style="display:none;" src="about:blank"></iframe> </body> </html>

 Dans la page Default4.aspx il suffit alors de renvoyer :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script type="text/javascript"> window.parent.CS.UploadAjax.callBack('fichier envoyé avec succès 55430 octets') </script> </head> <body> </body> </html>

A partir de maintenant lorsque l'on clique sur le bouton envoyer, un message apparait en indiquant la taille du fichier et cela sans recharger la page.

On pourrais aller plus loin, en générant automatiquement l'iframe lorsque l'on clique sur le bouton, il existe de nombreux exemples sur le net le faisant, par exemple celui-ci : Ajax file upload.

Dans une prochaine partie, nous verrons comment utiliser cette astuce pour activer le contrôle fileUpload dans un UpdatePanel.


[Edit] : La partie 2 est disponible ici : Ajax et Upload - part 2 : Utilisation d'un UpdatePanel et d'un FileUpload

Posted: samedi 24 mars 2007 12:58 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

FREMYCOMPANY a dit :

Lol, ajax, ajax, il s'agit un peu d'un abus de langage là ;) Déjà que le X est utilisé à tort ;)

C'est plutot un truc genre "Asynchronous Data Transfering" ou "Asynchronous Server Call" ici...

# mars 24, 2007 17:51

badrbadr a dit :

Merci pour ce post, je me demandais justement comment Windows Live Mail faisait pour charger un fichier sans rafraichir toute la page. Ça répond à ma question :)

Maintenant, est-il possible d'avoir une barre de progression?

# mars 25, 2007 20:33

cyril a dit :

Oui on peut avoir la progressbar regarde sur mon post précédents http://blogs.developpeur.org/cyril/archive/2005/10/01/11883.aspx

# mars 25, 2007 22:04

Kenji a dit :

Salut,

Sujet qui m'intéresse vivement.

Le seul problème que je rencontre :

Comment peut-on avoir un retour si l'upload à raté ?

Merci.

# mars 26, 2007 19:56

cyril a dit :

Quelle est la différence entre un upload qui merde est une classique requete ? La problèmatique est exactement la meme que la requête XMLHttpRequest qui plante, il faut mettre un timer pour gerer le timeout entre autre

# mars 26, 2007 21:16

Kenji a dit :

En effet c'est la meilleure solution. Merci

Je me cassias la tête à récupéré le contenu ou l'url de l'iframe à intervalle régulier mais c'est sans espoir ^^

# mars 26, 2007 21:37

xorax a dit :

merci pour les infos!

j'ai recencé la pluspart des méthodes disponibles pour faire un upload file en ajax ici :

http://www.xorax.info/blog/programmation/100-cibler-javascript-document-iframe.html#comments

# avril 22, 2007 23:09

kuroro72 a dit :

Bonjour

Avant toute chose, bravo pour tous tes articles ils sont  a la fois tres interessant et tres pratique. Je viens de me mettre a Ajax et .NET et justement je travaille sur l'upload de fichier.

J'ai suivi ton didacticiel a la lettre et cela marche parfaitement (du moins pour le javascript). Cependant je n'arrive pas a faire l'upload du fichier en lui meme.

Je suppose qu'il est cense se faire dans la page default4.aspx mais je n'arrive pas a acceder aux variables du formulaire.

Si tu pouvais m'aider Cyril en illustrant reellement l'upload du fichier dans cette page cela m'aiderait grandement.

Merci d'avance

# juillet 31, 2007 23:53

cyril a dit :

Oui, l'upload se fait dans la page définit par l'attribut action du formulaire c'est à dire default4.aspx.

Pour récuperer le fichier dans cette page il faut faire un Request.Files["file1"] puis l'enregistrer comme n'importe quelle fileupload

# août 6, 2007 12:28

valentino a dit :

Bonjour,

Tout d'abord je tiens remercier la communauté pour ses sources très intéressante.

Je rencontre une problème avec innerHTML, voici ma requête :

window.parent.CS.UploadAjax.callBack('

<form id="test" name="test" action="test.php"><input type="text" id="texte" name="texte" /></form>

# novembre 24, 2008 11:52

valentino a dit :

')

Cela me génère une erreur d'exécution inconnue JavaScript... Le problème vient de la balise 'form'.

Quand je mets toutes autres balises il n’y a aucun problème !

Pouvez-vous m'aider ?

Merci d'avance.

# novembre 24, 2008 11:53

valentino a dit :

Petite précision : Cela fonctionne sous FireFox !!!

Désolé pour la polution.

# novembre 24, 2008 14:15
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01

- SharePoint Online: Script PowerShell pour supprimer une colonne dans tous les sites d’une collection par Blog Technique de Romelard Fabrice le 11-27-2018, 18:01