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 :

Image input file


Sujet :

JavaScript

  1. #1
    Membre du Club
    Inscrit en
    Avril 2010
    Messages
    101
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 101
    Points : 52
    Points
    52
    Par défaut Image input file
    Bonjour,

    Je fais un site de photos, lors de l'upload, j'aimerai afficher une petite image à côté de <input type="file"... afin que le visiteur puisse voir la photo qu'il vient d'uploader. Seulement lorsqu'on recharge la page je crois comprendre qu'il n'est pas possible de laisser le lien C:\...\image.jpg dans le input file.

    Quelqu'un as-t-il une astuce ? (Une solution magique serait de récupérer l'image avec du JS et appliquer un background-image sur un cadre à côté via un onChange sur l'input file)

    Merci.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 048
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 048
    Points : 44 562
    Points
    44 562
    Par défaut
    Bonjour,
    l'image ayant été uploadée, donc disponible sur le serveur, il suffit de modifier le HTML de la page en faisant référence à celle ci.

  3. #3
    Membre du Club
    Inscrit en
    Avril 2010
    Messages
    101
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 101
    Points : 52
    Points
    52
    Par défaut
    Comment récupérer l'image sur le serveur sans recharger la page ?
    Si c'est impossible, est-il possible alors de recharger la page tout en gardant la valeur de l'input file ?
    Merci.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 048
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 048
    Points : 44 562
    Points
    44 562
    Par défaut
    ton uploadage étant réalisé via un formulaire, normal, le rechargement de la page sera effectif sauf si tu places le formulaire dans une IFRAME.
    Tu peux modifier dans ce cas l'affichage de la page via une requête AJAX.
    Je ne saisi pas trop l'intêret de conserver la valeur de l'INPUT type file

  5. #5
    Membre du Club
    Inscrit en
    Avril 2010
    Messages
    101
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 101
    Points : 52
    Points
    52
    Par défaut
    Lorsque l'utilisateur se trompe dans d'autre champ (texte par ex). En gardant la valeur de l'input type file, ça lui permettra de renvoyer le formulaire en ne modifiant que les champs textes érronés

Discussions similaires

  1. Background-image input file Parcourir
    Par seb-65 dans le forum Mise en page CSS
    Réponses: 13
    Dernier message: 09/08/2012, 10h34
  2. Interdire l'upload d'image dans un input files
    Par drumtof dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 17/03/2010, 09h12
  3. Tag Input File (visualisation image en local)
    Par jacquesdx dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 21/08/2009, 09h43
  4. Image pour un Input File ?
    Par Guybrush113 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 10/12/2007, 17h23
  5. Input file sur une image
    Par Fonzy17 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 21/06/2006, 11h29

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