Afficher dans Twig l'image avant l'envoi serveur

Par Alain Ouakbar Tabba Sardinaluile, il y a 8 ans

PHP Symfony

Bonjour à tous et à toutes !
Je travaille sur un site en symfony.
Je souhaiterais savoir comment afficher en préalable l'image que l'on vient de récupérer sur son poste (une prévisualisation avant le "Envoyer !"
DAns l'image du dessus, c'est marqué "Aucun fichier choisi"
Et quand je clique sur "Choisissez un fichier", le nom du fichier choisi s'affiche à la place de "Aucun fichier choisi"...
Aucun moyen de travailler cette zone : j'ai regardé dans le request, j'ai vu aussi les variables PHP , mais comment afficher la variable $_FILES[...] dans twig ?
Merci de vos suggestions et je continue à chercher !

1 réponse

Alain Ouakbar Tabba Sardinaluile, il y a 8 ans

Ca y est , j'ai trouvé une solution qui marche de feu de dieu

Il faut passer par du javascript

Alleluia

merci la foule

{% extends "::base.html.twig" %} {% block asidemenu %} {% include "menu.html.twig" %} {% endblock%} {% block body %} <div id=contenu> <div id=thememenu> <h1>Choisir une image pour mon profil</h1> <h4>mon pseudo est {{ app.user.username }}</h4> {% if status is not defined %} <form class="form" method="POST" enctype="multipart/form-data" action="{{ path('demo_upload', {'id_joueur': id_joueur}) }}"> <input type="file" id=imgImp name="img"> <img id=blah /> <button class="btn btn-large btn-primary" type="submit"> Envoyer !</button> </form> {% elseif status =='success' %} {% if uploadedURL is defined%} <img src="{{asset(uploadedURL)}}"/> {% endif %} {% else%} {% if message is defined %} <div class=""> <p>{{message}}</p>fff </div> {% endif %} {% endif %} </div> </div> <script> $(document).ready(function () { function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgImp").change(function(){ readURL(this); console.log('change !'); }); }); </script> {% endblock %}