Upload image(s) et prévisualisation

Bonjour à tous,

voici mon problème.

J'ai un formulaire dans lequel j'ai des champs données (nom, adresse) et aussi la possibilité d'uploader une image.

1° - Je voudrais savoir comment prévisualiser l'image uploadée sans pour autant envoyer mon formulaire.

J'ai essayé en mettant un formulaire "image" dans mon formulaire "données" mais en cliquant sur le le bouton envoyé du formulaire "image", c'est tout le formulaire qui est traité (càd "données" y compris).

D'après mes recherches sur le net, cela n'a pas l'air d'être possible (parce que l'image n'est pas encore sur le serveur)

J'ai également pensé à lire ce qui était dans un dossier temporaire (tmp) mais sans succès.

2° - Je voudrais savoir s'il est possible de donner la possibilité à l'utilisateur d'uploader autant d'ilmages qu'il veut ?

Avez-vous des idées ou des pistes?

Merci de m'avoir lu et pour votre aide

Salut Paintbox,

ce n'est effectivement pas possible sans envoyer au moins l'image coté serveur. Sans détails particuliers, ça veut donc aussi dire envoyer le formulaire complet au serveur. Mais il resterait une option : AJAX, donc du JavaScript qui te permettrait de ne faire que l'upload pour ton champs de type FILE.

Je crois que ce qu'il est important que tu arrives à saisir, c'est la distinction entre ce qui se passe coté client et ce qui se passe coté serveur. Lorsque tu vois un formulaire dans ton navigateur, tu es coté client. Tant que tu n'auras pas cliqué sur le bouton d'envoi, rien ne se passera coté serveur et aucun échange ne se passera. Ensuite lorsque tu cliques sur ce bouton, les données du formulaire sont envoyées au serveur et rien ne se passera coté client tant que le serveur n'aura pas terminé les traitements pour construire la page avec le résultat attendu.

En résumé, tu pourrais concevoir un JavaScript qui intercepterait un évènement dans le champ de sélection de fichier pour tes images : de là, il faudrait envoyer seulement cette image au serveur à un script spécifique dédié à cette action, scriptqui traiterait l'image de telle sorte qu'il te retourne une prévisualisation au JavaScript, lequel l'afficherai dans ton formulaire toujours présent. Là, on a pas de rechargement de page ni d'envoi de formulaire, les échanges partiels entre le navigateur et le serveur sont gérés en JavaScript.

Mais cette formule n'a rien de très facile si tu n'as jamais touché à JavaScript en général, AJAX en particulier.

Bonjour Cyrano,

merci pour ta réponse. Je n'ai effectivement jamais fait de JavaScript.

Je ne vois donc pas d'autres solutions à mon problème.

Je n'ai pas encore testé, mais je me demande si une solution ne serait pas d'envoyer mon formulaire avec les données et les images vers ma page traitement. La page traitement enregistre dans la base de données, affiche la "fiche du produit" càd avec données et images et sur cette même page, mettre un lien "modifier" qui reprend cette fiche et permet de modifier les images.

Qu'en pense-tu?

Merci

Ce que tu peux envisager, ce serait d'ajouter dans ta fiche de prévisualisation un bouton de confirmation de publication. En d'autres termes, tu enregistres ta fiche normalement mais elle n'est pas publiée sur le site public. Dans ton système, tu prévois une page listant les articles en attente de publicationavec des liens cliquables pour voir chaque fiche individuellement : dans cette fiche, tu vois ce que ça doit donner et tu décides à ce moment-là de publier ou de modifier. Il te faut donc deux boutons, un pour renvoyer vers le formulaire pour changer un libellé ou une image et l'autre pour valider la publication.

Enfin ceci n'est valable que dans la mesure où tu veux voir l'image dans la fiche de prévisualisation. S'il ne s'agit que des parties texte de ta fiche, il faudrait aussi du JavaScript pour récupérer les valeurs saisies et construire un pop-up de la fiche avant d'envoyer tout ça au serveur. Mais pour l'image, ça pose un problème moins facile à résoudre.

OK je crois que je vais faire simple et oublier la prévisualisation des images.

Encore merci pour ton aide (une fois de plus! )

Pas de quoi :)