Salut,

Je connais rien au JS

J'ai un formulaire ou l'on doit choisir une photo de bannière et j'aimerai qu'une fois selectionnée l'image soi visualisable en Background dans la div banner (avant que le formulair sois soumis donc le fichier est toujours coté client.

J'avait un code trouvé sur internet mais fait pour une <img> et j'ai essayé de le modifié pour que ca puisse le faire pour le background de ma div... mais en vain...

voici le code : Je sais pas vraiment ce que je fais donc c'est peut-etre tout faux...

comment atteindre mon but?

<div id="output" class="banner">
                        <div class="header">
                            <div class="headertitle">Add a New System : <input type="text" name="system" placeholder="System's name"></div>
                            <div class="headerline">Add a Banner <i>(1112px X 250px)</i> :
                                <input type="file" accept="image/*" onchange="loadFile(event)">
                                 
                                <script>
                                  var loadFile = function(event) {
                                    var output = document.getElementById('output');
                                    output..style.backgroundImage = URL.createObjectURL(event.target.files[0]);
                                  };
                                </script>
                            </div>
                        </div>
                </div>

-
Edité par JérômeBadoux 21 novembre 2017 à 22:42:13

Salut

Y a un double point après ton output donc erreur de syntaxe pour commencer

Ensuite en CSS tu dois savoir qu'un background image se défini comme suit : url("lien vers la source"). Toi dois ajouter 'url("' + avant l'URL et + '")' après

-
Edité par LCaba 21 novembre 2017 à 8:16:06

Je dois avouer que je sais pas trop ou je dois mettre ces "+ ... +" dans mon code vu que je comprends pas trop ce que je lis en JS.

L'URL c'est une chaine de caractère, par exemple 'image.png' ou une chaine blob dans ton cas.

Sauf que toi, il faut que tu ajoute url(" avant et ") après. On appelle ça une concaténation. En javascript, on concatène avec l'opérateur +, et les chaines de caractères sont délimités par des guillemets simples ou doubles (ici, utilise les guillements simples puis tes chaines contiennent des guillements doubles)

ca j'avais compris mais dans mon code y a nulle part un URL a proprement parlé ce sont des fonctions et des variables donc je sais pas ou je dois mettre ces "+ et +"

Qaund c'était une image, y avait pas d'URL à proprement parler, et pourtant, tu savais quoi mettre dans le src.

Plus haut, je t'ai écris précisément la solution : "Tu dois ajouter 'url("' + avant l'URL et + '")' après". T'as juste à faire un copier-coller.

-
Edité par LCaba 21 novembre 2017 à 17:29:06

Je pense m'être mal exprimé ... 
Ou Exactement dans CE code dois-je mettre 'URL("+...+")'?

et quelle partie exactement de CE code doit se situer entre les + ?

J'avais bien compris. Quand je dis t'as juste à faire un copier-coller, c'est dans TON code. Et dans TON code, l'URL c'est URL.createObjectURL(event.target.files[0])

ben ca marche pas

Bonjour,

Pour moi cela n'est pas possible de lire une ressource tel que tu essayes de le faire pour des questions de sécurité,

mais je me trompe peut être!

Tu dis "avoir trouvé un script sur interne", peut-tu nous transmettre l'url car je suis intéressé.

désolé me souviens plus de l'url... c'était sur stack overflow c'est tout ce que je sais

Un exemple ici : https://jsfiddle.net/jmwnjb6k/ 

@AliasDmc : pas de problème de sécurité, tu n'as accès qu'aux fichiers que l'utilisateur a bien voulu sélectionner. https://developer.mozilla.org/fr/docs/Web/API/FileList 

dans ton jsriddle il faut appuyer sur submit pour que l'image apparaisse ... elle apparait pas just lorsque je la selecte

Edit: plus très grave j'ai trouvé un autre moyen. merci bien

-
Edité par JérômeBadoux 21 novembre 2017 à 22:41:41

JérômeBadoux a écrit:

dans ton jsriddle il faut appuyer sur submit pour que l'image apparaisse ... elle apparait pas just lorsque je la selecte

Oui, parce que je l'ai conçu comme ça. C'est un exemple. Si c'est que ça, y a que 2 mots à changer : https://jsfiddle.net/jmwnjb6k/1/ Et ce qui compte c'est l'intérieur de la fonction que t'avais juste à copier dans ton code...