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

Langage PHP Discussion :

Php ajax upload previsualisation image avant soumission


Sujet :

Langage PHP

  1. #1
    Membre averti
    Homme Profil pro
    Inscrit en
    Décembre 2003
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2003
    Messages : 44
    Par défaut Php ajax upload previsualisation image avant soumission
    Bjr,

    j'ai un formulaire

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    <form id="Form1" name="Form1" method="post" action="suite.php">
    	<input type="text" name="nom" />
    	<input type="text" name="prenom" />
    ...
    j'aimerais que l'utilisateur puisse aller chercher une image sur son ordi MAIS que cette image s'affiche en miniature dans son formulaire AVANT de soumettre la totalité du formulaire à mon traitement suite.php

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    ...
    Select an image from your hard disk:
    <input type="hidden" name="MAX_FILE_SIZE" value="500" />
    <input type="file" name="fileToUpload" id="fileToUpload" />
     
    <button type="button" onclick="JavaScript: fonction('uploadimage')">upload</button> 
     
    ...
     
    <input type="Submit" value="Submit" id="buttonForm" />
    </form>
    J'ose espèrer que ma demande est explicite

    Merci de me faire parvenir dans la mesure du possible toute infos qui me permettront de résoudre ce cauchemar !

    cordialement
    Olivier

  2. #2
    Membre confirmé Avatar de alejandro
    Homme Profil pro
    Chef de projet NTIC
    Inscrit en
    Septembre 2004
    Messages
    167
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Chef de projet NTIC
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2004
    Messages : 167
    Par défaut
    Bonjour,

    Lorsque tu cliques sur "Parcourir ..." et que tu sélectionne ton image, normalement le chemin d'accès à cette image est intégré à ton champ input.

    Tu n'a qu'a lancer une fonction lorsque la valeur de cet input change et générer une image de manière dynamique en javascript et l'intégrer dans un conteneur :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <html>
    <head>
     
    <script type="text/javascript">
     
    function show_image()
    {
        var mypath = document.getElementById('myinput').value;
        var html = '<img src="'+mypath+'" />';
        document.getElementById('container').innerHTML = html;
     
    }
     
    </script>
     
    </head>
    <body>
     
     
    <input type="file" name="myfile" id="myinput" onchange="show_image();" />
    <div id="container"></div>
     
     
    </body>
    </html>
    Chez moi ça marche correctement.

    Amicalement,

  3. #3
    Membre averti
    Homme Profil pro
    Inscrit en
    Décembre 2003
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2003
    Messages : 44
    Par défaut
    merci pour ta réponse Alejandro,
    mais j'aurais préféré appeler( un script PHP ? ? ? ) ou quelque chose dans le genre afin de vérifier que l'image soit au bon format, qu'elle n'excède pas un certain poids qu'elle ne soit pas vérolée et ensuite l'afficher en miniature sur le formulaire.

    ce qui reviendrait presque il me semble a faire une sorte de formulaire dans un formulaire

    on peut voir le type de réalisation que j'aimerais obtenir quand on met des images dans un formulaire de petite annonce de vente d'un objet sur le site E b a y

  4. #4
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Bonjour,

    Tu n'a qu'a lancer une fonction lorsque la valeur de cet input change et générer une image de manière dynamique en javascript et l'intégrer dans un conteneur :
    ça ne marche que sous les anciens version de IE, en fait c'est du à une question de sécurité. La meilleure façon c'est d'uploader le fichier sur le serveur via un iframe caché, et modifier ensuite le chemin du src de l'image par rapport au chemin de fichier sur le serveur. Sinon, tu peux voir du coté flash ou applet.

    A+.

  5. #5
    Membre averti
    Homme Profil pro
    Inscrit en
    Décembre 2003
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2003
    Messages : 44
    Par défaut suite et fin
    Ok !
    ce sera donc un formulaire dans un iframe lui même dans un formulaire

    Adieu !

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

Discussions similaires

  1. [2.x] [Form] Upload de fichiers avant soumission
    Par taka10 dans le forum Symfony
    Réponses: 2
    Dernier message: 13/03/2013, 15h32
  2. [Upload] Redimensionner image avant upload
    Par spawns dans le forum Langage
    Réponses: 3
    Dernier message: 08/05/2009, 10h16
  3. [AJAX] upload d'images php/ajax
    Par zehni dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 17/08/2007, 14h13
  4. Réponses: 1
    Dernier message: 10/10/2006, 14h19
  5. Preview d'une image avant upload
    Par nabbo dans le forum Général JavaScript
    Réponses: 20
    Dernier message: 21/12/2005, 01h02

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