IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[AJAX] Ajax avec input type file


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations forums :
    Inscription : Juillet 2006
    Messages : 11
    Points : 7
    Points
    7
    Par défaut [AJAX] Ajax avec input type file
    Bonjour à tous,

    J'essai actuelement d'uploader un fichier en passant un formulaire à une autre page grace à XMLHttpRequest mais aparement ce n'est pas possible.Est ce que quelqu'un aurait une solution ?

    Merci pour eventuelles suggestions

  2. #2
    Membre actif
    Homme Profil pro
    Inscrit en
    Avril 2006
    Messages
    245
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations forums :
    Inscription : Avril 2006
    Messages : 245
    Points : 239
    Points
    239
    Par défaut
    Fais le en PHP, c'est tellement plus simple...
    voir http://fr3.php.net/manual/fr/reserved.variables.php au paragraphe $_FILES
    Guy777

  3. #3
    Futur Membre du Club
    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations forums :
    Inscription : Juillet 2006
    Messages : 11
    Points : 7
    Points
    7
    Par défaut
    Citation Envoyé par guy777
    Fais le en PHP, c'est tellement plus simple...
    voir http://fr3.php.net/manual/fr/reserved.variables.php au paragraphe $_FILES
    Merci à toi mais je le fais d'habitude en php mais la jai besoin que seul la div dans lequel se trouve le formulaire se rafraichisse et non la page entiere.
    Si quelqu'un à la solution se serait merveilleux.

  4. #4
    Membre actif
    Homme Profil pro
    Inscrit en
    Avril 2006
    Messages
    245
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations forums :
    Inscription : Avril 2006
    Messages : 245
    Points : 239
    Points
    239
    Par défaut
    Après quelques recherches sur Internet ,il semble qu'un Upload en javascript SEUL soit impossible. Toutes les solutions que j'ai trouvées font intervenir soit PHP, soit une applet Java, et autres langages. Si quelqu'un a effectivement la solution, je suis aussi preneur.
    Guy777

  5. #5
    Futur Membre du Club
    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations forums :
    Inscription : Juillet 2006
    Messages : 11
    Points : 7
    Points
    7
    Par défaut
    Bonjour tout le monde,

    Aparement mon post n a pas fait fureur ou peut etre que je me suis mal exprimé par rapport à mon problème.

    J imagine que beaucoup parmis vous utilisent Ajax pour validé des formulaires sans que la page ne soit integralement relancée par le naviguateur.
    Je n avais jamais rencontré de problème avec cette methode jusqu au jour ou j ai voulu permettre a l utilisateur de pouvoir uploader un fichier image a partir d un formulaire.
    Ma page php ou se trouve le formulaire utilise donc du type file dans son formulaire et lorsque celui ci est validé par l utilisateur, une fonction javascript est solicité pour executé une autre page php qui recupere les informations du formulaire et execute une requette sql pour validé lenregistrement dans une table.
    Le probleme est que ce procédé Ajax n est fait que pour recuperer du texte et n a certainement pas le droit d acceder au disque dur pour recuperer le fichier en question.
    J ai pas mal cherché sur les differents forums et les quelques exemples que j ai pu trouvé n etait pas tres explicite.

    Si quelqu'un a une idée......

    Merci beaucoup

  6. #6
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Points : 2 351
    Points
    2 351
    Par défaut
    Salut,

    En Ajax, l'upload de fichier ce fait (sans ajax) :-)

    Tu dois utiliser un post de formulaire classique pour envoyer un fichier.
    Par contre, l'astuce réside dans l'attribut target de ta balise form.

    Pour éviter de rafraichir ta page entière, tu crée un iframe par exemple:

    <iframe name='cible'></iframe>

    Ensuite tu modifies ta balise form ainsi

    <form target='cible' ...>

    Ainsi, c'est un post tout a fait standard qui est fait, mais le résultat et
    affiché dans l'iframe. Ce que tu vas retourner dans le code de l'iframe,
    c'est un script javascript qui va appeler la fonction callback de ta page
    principale, ainsi:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <script language='javascript' type='text/javascript'>
    parent.fonctionCallBack();
    </script>
    Enfin... un petit peu de CSS fera l'affaire pour rendre ton iframe "invisible".
    pour des raison de compatibilité, il est préférable de ne pas utiliser
    display: none, ni visibility: hidden. (il faut faire un width: 1px; height: 1px;
    overflow: hidden; border: 1px solid white c'est plus safe
    Si ton code fait plus d'une ligne, c'est que tu as mal choisi ton langage !

  7. #7
    Futur Membre du Club
    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations forums :
    Inscription : Juillet 2006
    Messages : 11
    Points : 7
    Points
    7
    Par défaut
    Citation Envoyé par marcha
    Salut,

    En Ajax, l'upload de fichier ce fait (sans ajax) :-)

    Tu dois utiliser un post de formulaire classique pour envoyer un fichier.
    Par contre, l'astuce réside dans l'attribut target de ta balise form.

    Pour éviter de rafraichir ta page entière, tu crée un iframe par exemple:

    <iframe name='cible'></iframe>

    Ensuite tu modifies ta balise form ainsi

    <form target='cible' ...>

    Ainsi, c'est un post tout a fait standard qui est fait, mais le résultat et
    affiché dans l'iframe. Ce que tu vas retourner dans le code de l'iframe,
    c'est un script javascript qui va appeler la fonction callback de ta page
    principale, ainsi:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <script language='javascript' type='text/javascript'>
    parent.fonctionCallBack();
    </script>
    Enfin... un petit peu de CSS fera l'affaire pour rendre ton iframe "invisible".
    pour des raison de compatibilité, il est préférable de ne pas utiliser
    display: none, ni visibility: hidden. (il faut faire un width: 1px; height: 1px;
    overflow: hidden; border: 1px solid white c'est plus safe
    Ca a bien l'air d'etre ce qu il me fallait.
    Merci à toi, je fait le test et vous tien au courant

  8. #8
    Futur Membre du Club
    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations forums :
    Inscription : Juillet 2006
    Messages : 11
    Points : 7
    Points
    7
    Par défaut
    Merci a toi ca resoud mon prroblème et c'est simple

    Juste un truc à voir par rapport à la fonction parent.callback car je vois pas trop à quoi elle sert pour le moment.

    @+

  9. #9
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Points : 2 351
    Points
    2 351
    Par défaut
    La fonction callback est utile si tu dois faire qqch suite à l'upload,
    par exemple, créer dynamiquement une balise img qui affiche l'image
    que tu viens d'uploader.

    Ou alors tu peux appeler une autre fonction en cas de problème.
    Si ton code fait plus d'une ligne, c'est que tu as mal choisi ton langage !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Validation formulaire ajax avec input type file
    Par lolodev dans le forum jQuery
    Réponses: 0
    Dernier message: 08/12/2011, 19h28
  2. probleme avec <input type="file">
    Par slash_X dans le forum Struts 1
    Réponses: 1
    Dernier message: 21/04/2010, 17h25
  3. Récupérer le chemin complet avec <input type="file">
    Par dariyoosh dans le forum Struts 1
    Réponses: 2
    Dernier message: 24/04/2009, 17h49
  4. formulaire avec input type="file"
    Par Naksh-i dans le forum Servlets/JSP
    Réponses: 2
    Dernier message: 24/10/2006, 08h51
  5. aperçu d image avec input type file marche pas dans ffx
    Par siddh dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 09/11/2005, 09h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo